我已经研究了一些Backbone相关的教程并创建了一些简单的应用程序。现在我再次从头开始,试图使用Backbone提供的好功能。 但是我的视图有问题。当页面加载时,它可以正常渲染并通过迭代集合来创建其嵌套视图。但是,当我再次调用render()来刷新整个列表或者只是单个条目时,所有视图属性似乎都未定义。
单个条目的模型:
现在,如果我从服务器获取集合,视图会正常渲染:
当我点击添加项目到集合的按钮时,EntryListView上的事件处理程序就会捕获'add'事件并调用render()。但是,如果我在render函数中设置断点,我会发现所有属性似乎都是"未定义的"。没有
单个条目的模型:
Entry = Backbone.Model.extend({
});
一份条目清单:(json.html 是数据来源的占位符)
EntryCollection = Backbone.Collection.extend({
model: Entry,
url: 'json.html'
});
var entries = new EntryCollection();
此视图用于单个条目,它会填充 Underscore 模板,并在模型更改时重新渲染自身。
EntryView = Backbone.View.extend({
template: _.template($('#entry-template').html()),
initialize: function(){
this.model.on('change', this.render);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
这是一个查看整个条目列表的视图,其中针对集合中的每个项目渲染一个EntryView,并且如果添加了新项目,则应该重新呈现自身。该按钮仅用于测试目的。
EntryListView = Backbone.View.extend({
tagName: 'div',
collection: entries,
events: {
'click button': 'addEntry'
},
initialize: function(){
this.collection.on('add',this.render);
},
render: function(){
this.$el.append('<button>New</button>'); //to test what happens when a new item is added
var els = [];
this.collection.each(function(item){
els.push(new EntryView({model:item}).render().el);
});
this.$el.append(els);
$('#entries').html(this.el);
return this;
},
addEntry: function(){
entries.add(new Entry({
title: "New entry",
text: "This entry was inserted after the view was rendered"
}));
}
});
现在,如果我从服务器获取集合,视图会正常渲染:
entries.fetch({
success: function(model,response){
new EntryListView().render();
}
});
当我点击添加项目到集合的按钮时,EntryListView上的事件处理程序就会捕获'add'事件并调用render()。但是,如果我在render函数中设置断点,我会发现所有属性似乎都是"未定义的"。没有
el
,也没有collection
...我错在哪里了?
谢谢您的帮助,
罗伯特