Question

I have a backbone collection. I fetch. The server comes back with a JSON. How do I populate the collection witht he fresh data? Here’s my code:

    var Todos = Backbone.Collection.extend({

       url: "server/todos-service.php", // this does what it is supposed to do so no worries!

       model: Todo,   

       initialize: function(attributes, options) {    
           // IN HERE WHAT DO I HAVE TO DO?
           // WHAT EVENT SHALL I BIND TO TO REACT THE DATA DELIVERY?
           // AND WHAT SHALL I DO NEXT TO POPULATE THE DAMN THINGS

           }
        });

    // CLIENT CODE
    new Todos().fetch();

Can anyone tell me how this is supposed to be done?

Cheers

Answer 1

The fetch will start the ajax call to your server. When the data is returned it is automatically put the data into your collection, and the collection will fire a reset being like “I’m done fetching data bro, you can use it now.”

You would usually call fetch() from inside your view, and have the view listen to the reset event. When the reset event is trigger, the view renders the collection.

var Todo = Backbone.Model.extend({
    // my model
});

var TodoList = Backbone.Collection.extend({
     url: myurl
     model: Todo   
    // my collection (usually nothing in the initialize function) 
});


var AppView = Backbone.View.extend({
  initialize: function() {
    // instantiate the collection
    this.collection = new TodoList();

    //listen to the reset event on the collection. When the reset event trigger, call the render function.
    this.collection.on('reset', this.render, this);

    // get the data from the backend
    this.collection.fetch();
  },
  render: function() {
     // render the collection like a boss
  }
});

//instantiate the view 
var App = new AppView;

Also as a resource, I found this tutorial to be really helpful in understanding the basics of backbone http://net.tutsplus.com/sessions/build-a-contacts-manager-using-backbone-js/