不要在模板中循环集合。如果你想这样做,最好使用HTML片段和AJAX。相反,使用一个渲染其自身视图的Backbone View(细粒度是减少服务器同步和页面刷新的关键)。这是递归的,可以重复此模式,直到没有更多相关数据可循环。
——Jonathan Otto 在 《面向普通人的 Backbone.js 概念理解》 中指出
当你想渲染子视图时,当然会有一些注意事项。
我进行了代码搜索,试图找到一些如何做这个的示例。结果发现TodoMVC示例是一个很好的模型。从Strider-CD源代码(MIT许可证)中得知:
var UserView = Backbone.View.extend({
tagName: "option",
template: _.template($('#user-item-template').html()),
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.model.bind('destroy', this.remove);
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
clear: function() {
this.model.clear();
}
});
var UsersView = Backbone.View.extend({
el: $("#user-form"),
initialize: function() {
_.bindAll(this, 'addAll', 'addOne','render');
Users.bind('add', this.addOne);
Users.bind('reset', this.addAll);
Users.bind('all', this.render);
console.log("fetching Users");
Users.fetch();
},
render: function() {
console.log("rendering User AppView");
},
addOne: function(User) {
console.log("adding one User: " + User.get("id") + "/" + User.get("email"));
var view = new UserView({model: User});
this.$("#user-list").append(view.render().el);
},
addAll: function() {
console.log("adding all Users");
console.log(Users.length + " Users");
Users.each(this.addOne);
}
});
console.log("starting userapp now");
var UsersApp = new UsersView();
});
选择列表视图与选项子视图的其他示例可在以下位置找到: