backbone collection fetch subtitute $.ajax - backbone.js

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??

Answer 1

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.