javascript - Backbone.js - data not being populated in collection even though fetch is successful

Question

I am trying to populate a collection from a simple JSON file as part of learning backbone.js. But I can't get it to work.

The AJAX call is made (verified with FireBug), but the toJSON method returns undefined.

What am I doing wrong?

theModel =  Backbone.Model.extend();

theCollection = Backbone.Collection.extend({
    model: aModel,
    url: "source.json"
});

theView = Backbone.View.extend({
   el: $("#temp"),
   initialize: function () {
       this.collection = new theCollection();
       this.collection.fetch();
       this.render();
   },
   render : function () {
       $(this.el).html( this.collection.toJSON() ); // Returns blank
   }
});

var myView = new theView;

Here's my JSON:

[{
    "description": "Lorem ipsum..."
 },
 {
    "description": "Lorem ipsum..."
}]

Answer 1

fetch is asynchronous, your collection won't yet be populated if you immediately call render. To solve this problem, you just have to bind the collection reset event (sync event for Backbone>=1.0) to the view render :

theView = Backbone.View.extend({
   el: $("#temp"),

   initialize: function () {
       this.collection = new theCollection();

       // for Backbone < 1.0
       this.collection.on("reset", this.render, this);

       // for Backbone >= 1.0
       this.collection.on("sync", this.render, this);

       this.collection.fetch();
   },

   render : function () {
    console.log( this.collection.toJSON() );
   }
});

Note the third argument of the bind method, giving the correct context to the method: http://documentcloud.github.com/backbone/#FAQ-this