I read many Backbone.js tutorials, but most of them deal with static objects.

Of course, I have data on the server. I want a tutorial that shows how backbone.js can communicate with the server to fetch data, post data, etc.

This is .sync, right? I read the backbone.js documentation, but still fuzzy on how to use this feature.

Or can someone show me an example?

According to:

Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server.

But when? Where do I put the function? I don't know how to use it, and the documentation doesn't give any examples. When does the data get loaded into my models? I get to define when...right?

I read many Backbone.js tutorials, but most of them deal with static objects.

Of course, I have data on the server. I want a tutorial that shows how backbone.js can communicate with the server to fetch data, post data, etc.

This is .sync, right? I read the backbone.js documentation, but still fuzzy on how to use this feature.

Or can someone show me an example?

According to: http://documentcloud.github.com/backbone/#Sync

Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server.

But when? Where do I put the function? I don't know how to use it, and the documentation doesn't give any examples. When does the data get loaded into my models? I get to define when...right?

• javascript
• jquery
• model-view-controller
• http
• backbone.js

• .sync sends POST or PUT XHR requests to the server, in order to save the client model state (or GET to fetch the state from the server). It helps to look at the network traffic using the Web developer tools of your browser. – Thilo Commented Nov 28, 2011 at 4:44
• So with .sync, I don't have to use JQuery's .ajax() anymore? (to get data to my models, etc) – TIMEX Commented Nov 28, 2011 at 5:07
• If the default .sync works for you, then, yes (it uses .ajax under the covers for you). If you need to change what it does, then you probably need to replace it with some code that uses .ajax directly. – Thilo Commented Nov 28, 2011 at 5:10
• 2 @Thilo, sorry I'm just a noob. I have no idea how to use .sync. Right now, I'm using backbone.js, with .ajax() myself at random places to fetch data from the server (manually). I feel like I'm doing something wrong. – TIMEX Commented Nov 28, 2011 at 5:43
• The second answer below is the best: .sync is called when model.save() is called. – Ziggy Commented Dec 17, 2013 at 16:55

3 Answers 3

You never really have to look at .sync, unless you plan to overwrite it. For normal uses, you can simply call model.save() whenever you want and that will execute a post or put (depending on whether the record exists already). If you want to get the data from your backend, use collection.fetch()

You'll of course also need to specify a URL, do so through your collection attribute, collection.url

You can override Backbones native sync functionality if you override it:

Backbone.sync = function() {
  //Your custom impl here
}

After that this function is called whenever you call a backbone function like .save() on models or .fetch() on collections. You do not have to care about data transport anymore.

I would suggest taking a look into Backbones source and look how the default sync function is implemented. Then create your own or adopt your server to support the native function.

They are not free, but the following screencasts both have a piece on backend work and how to send data to and get data from Backbone.

1. Tekpub is a 9 part screencast about asp.net MVC3, with the whole 6th part about using backbone to write an admin module to manage productions. it shows all about handling routing in MVC3 and sending & receiving data

2. Peepcode

   • http://peepcode.com/products/backbone-js about basic backbone stuff
   • http://peepcode.com/products/backbone-ii about interactivity
   • http://peepcode.com/products/backbone-iii about persistance (it's this third one you will need for server connection information).