我正在尝试从本地API填充我的Backbone集合并更改视图以显示数据。我的集合中的fetch()调用似乎成功了,并且抓取了数据,但是fetch操作不会更新集合中的模型。
这就是我的模型和收藏品:
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");
}
});
我已经完成了这样的观点:
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();
我的API返回如下的JSON数据:
[
{
"id": "1",
"title": "Ice Station Zebra",
"author": "Alistair MacLaine"
},
{
"id": "2",
"title": "The Spy Who Came In From The Cold",
"author": "John le Carré"
}
]
当我运行此代码时,我在控制台中得到了这个:
BookListView.render() app.js:67
Collection fetch success Array[5]
Collection models: undefined
它向我表明fetch调用正在获取数据,但它没有用它填充模型。谁能告诉我这里我做错了什么?
答案 0 :(得分:12)
您的fetchSuccess
函数应该collection.models
而不是this.models
。
console.log('Collection models: ', collection.models);
请考虑@Pappa提供的建议。
答案 1 :(得分:8)
您正在BookList集合上调用fetch两次,一次初始化时,再次初始化BookListView时。在实例化的时刻让一个集合填充自己被认为是不好的做法。您还在初始化调用中两次渲染视图,一次响应'reset'事件,然后您也直接调用它。
我建议从BookList集合中完全删除initialize函数,并删除对this.render()的调用;在BookListView的初始化调用结束时。