Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
33
rated 0 times [  34] [ 1]  / answers: 1 / hits: 27059  / 11 Years ago, sun, october 20, 2013, 12:00:00

I'm trying to populate my Backbone collection from a local API and change the view to show the data. The fetch() call in my collection seems to succeed, and grabs the data, but the fetch operation doesn't update the models in the collection.



This is what I've got for my model and collection:



var Book = Backbone.Model.extend();

var BookList = Backbone.Collection.extend({

model: Book,
url: 'http://local5/api/books',

initialize: function(){
this.fetch({
success: this.fetchSuccess,
error: this.fetchError
});
},

fetchSuccess: function (collection, response) {
console.log('Collection fetch success', response);
console.log('Collection models: ', this.models);
},

fetchError: function (collection, response) {
throw new Error(Books fetch error);
}

});


and I've done my views like this:



var BookView = Backbone.View.extend({

tagname: 'li',

initialize: function(){
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},

render: function(){
this.$el.html(this.model.get('author') + ': ' + this.model.get('title'));
return this;
}

});

var BookListView = Backbone.View.extend({

el: $('body'),

initialize: function(){
_.bindAll(this, 'render');

this.collection = new BookList();
this.collection.bind('reset', this.render)
this.collection.fetch();

this.render();
},

render: function(){
console.log('BookListView.render()');
var self = this;
this.$el.append('<ul></ul>');
_(this.collection.models).each(function(item){
console.log('model: ', item)
self.appendItem(item);
}, this);
}

});

var listView = new BookListView();


and my API returns JSON data like this:



[
{
id: 1,
title: Ice Station Zebra,
author: Alistair MacLaine
},
{
id: 2,
title: The Spy Who Came In From The Cold,
author: John le Carré
}
]


When I run this code I get this in the console:



BookListView.render() app.js:67
Collection fetch success Array[5]
Collection models: undefined


which indicates to me that the fetch call is getting the data OK, but that it's not populating the models with it. Can anyone tell me what I'm doing wrong here?


More From » json

 Answers
16

Your fetchSuccess function should have collection.models not this.models.



console.log('Collection models: ', collection.models);


and please consider suggestions given by @Pappa.


[#74860] Friday, October 18, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jaydenathaliam

Total Points: 676
Total Questions: 102
Total Answers: 103

Location: San Marino
Member since Thu, Jun 30, 2022
2 Years ago
;