Backbone collection not updating with JSONP request

Question

I just recently started using Backbone.js and I'm working on an app now using Brunch that does a JSONP request to an external API to populate my collection and models. I'm following these previous posts (this and this) on doing JSONP requests with Backbone, but my collection still isn't getting the data for some reason.

My model (app/models/model.js):

module.exports = Backbone.Model.extend({
});

My collection (app/models/collection.js):

var Post = require('./model');

module.exports = Backbone.Collection.extend({
    model: Post,
    url: "http://somedata.com/api/posts/list/stuff",
    sync: function(method, model, options) {  
        options.timeout = 10000;
        options.dataType = "jsonp";
        options.jsonp = "JSONPcallback";        
        return Backbone.sync(method, model, options);
    },
    parse: function(response) {
        if (response) {
            var parsed = [];
            for(var i = 0; i < response.results.length; i++) {
                parsed.push(response.results[i][0]);
            }

            return parsed;
        }
    }
});

Then, in the initialize method in app/application.js I'm calling it by:

var Category = require('models/collection');
this.cat = new Category();
this.cat.fetch();

Now, when I look at the parse function in console.log, I see the data being fetched, so the request is going through successfully. However, when my views are rendered and I do console.log(application.cat.models) in app/views/view.js, I get nothing -- why's this happening? Is there anything wrong with the code on my model/collection?

Also, the JSONP data has the following format, which is why looping through for response.results[i][0] and returning an array with all of it, that should do the trick, right?

{"results":[
  {"0":{"id":xxx,"title":xxx,"link":xxx},
   "description":xxx},
  {"0":{"id":xxx,"title":xxx,"link":xxx},
   "description":xxx},
  {"0":{"id":xxx,"title":xxx,"link":xxx},
   "description":xxx},...
]}

Would really appreciate any help...

collection.fetch() is an asyn request and needs a callback to view the data — Nishant Jani
Thanks a lot, good point - backbonejs.org/#Collection-fetch says that too, and that it shouldn't be used on page loads. It says reset() is used to boostrap a collection in the initial page load. So, I should be doing an ajax request for this data in application.js and have this.cat.reset() as a success callback? — Sayem Khan

Nishant Jani Nishant Jani · Accepted Answer · 2013-02-10T13:16:06

I have 2 comments here :

I see that you have names both your model and collection as module.exports , a common practice is to make the model as singular (module.export) and make the collection for those models plural module.exports , just common practice , nothing "wrong" otherwise
You can have 2 callbacks in your code , when the collection is done fetching data(asynchronous event) also considering module.exports as your collection here ,

A. You could do this :

module.exports.fetch({
success : function(data){
console.log(JSON.stringiy(data));
//do remaining programming here
}
});

B. you could have a event listener for reset , from the documentation here , the collection fires a reset event when it completes the fetch , so could add an event listener on the collection like this :

module.exports.on('reset',function(data){
console.log(JSON.stringify(data));
//do remaining programming here
},this);

Backbone collection not updating with JSONP request

1 Answers