backbone collection fetch subtitute $.ajax

Question

I'm trying to understanding backbone code. I read this http://addyosmani.com/blog/building-spas-jquerys-best-friends/

then I plan to change this

    if (this._index === null){
        $.ajax({
            url: 'data/blog.json',
            dataType: 'json',
            data: {},
            success: function(data) {
                ws._data = data;
                console.log(ws._data);
                ws._blogs = new BlogCollection(data.rows);
                console.log(ws._blogs);
                ws._index = new IndexView({model: ws._blogs}); 
                Backbone.history.loadUrl();
            }
        });
        return this;
    }
    return this;

use collection fetch

    if (this._index === null){
        ws._data = new BlogCollection;
        ws._data.fetch({success: function(data){console.log(data.models[0].attributes);}});


        //ws._blogs = new BlogCollection(ws._data.rows);
        //ws._index = new IndexView({model: ws._blogs});
        Backbone.history.loadUrl();

    }

with this collection

var BlogCollection = Backbone.Collection.extend({ model: Blog, url : 'data/blog.json', parse: function(response){ return response; }

when I read the response from collection, it's give same value as using jquery ajax. but when I use fetch in controller, why I have to access data.models[0].attributes); to get the same data return.

this is my json

{ "page":"1", "total": "5", "records": "25", "rows": [ { "title": "Classic Pop", "author": "Michael Jackson Collection", "image": "images/1.jpg", "tags": ["xyz", "abc", "def"], "slug" : "classic-pop", "url": "http://www.localhost/news", "intro": "hello test", "content": "hello test, alfjldsajfldjsflja dljfldasjfa jfljdasfl jfldsjf jljdafl jl" }, { "title": "Modern Pop/R&B", "author": "Bruno Mars and Others", "image": "images/54.jpg", "tags": ["test", "test2", "test3"], "slug" : "modern-pop-rb", "url": "http://www.localhost/news", "intro": "hello test 2", "content": "hello test, alfjldsajfldjsflja dljfldasjfa jfljdasfl jfldsjf jljdafl jl" } ] }

how to make fetch works right??

brappleye3 brappleye3 · Accepted Answer · 2012-07-12T22:40:14

When extending your Backbone Collection, you should define a parse function that returns an array of rows that represent the models contained in your collection.

In your case, it must be an array of data, with each object in the array representing your Blog model, so you need to return the rows property:

var BlogCollection = Backbone.Collection.extend({ 
    model: Blog, 
    url : 'data/blog.json', 
    parse: function(response){ 
        return response.rows; 
    }
});

Then if your model has a parse function, it will get the data for each object contained in the array, in case you need to do anything with the data before the model's attributes are set:

var Blog = Backbone.Model.extend({

    //data will contain one of the items returned from the collection's 'parse' function. 
    parse: function(data){
        return data;    
    }
});

This will ensure that the Backbone collection will properly create and populate the models represented in the collection with the data.

You will probably want to expose the other metadata (page, total, records) on the collection too, perhaps with a property that is also a Backbone.Model of page/total/records.

backbone collection fetch subtitute $.ajax

1 Answers