我有一个项目集合，我正在构建一个简单的界面，列出左侧的项目，然后在右侧显示当前所选项目的详细信息。
我正在尝试为 ItemsListView 中的每个项目呈现一个 ItemView。我需要绑定到模型的更改事件，以便 ItemView 与 ItemDetailView 一起更新。
在我下面的实现中，当更新在 ItemDetailView 中显示的模型时，在模型上设置新属性会更新 ItemDetailView，但不会更新它在 ItemView 中的表示。我知道我在做一些愚蠢的事情。我怎样才能重新实现这一点，以便重新渲染两者？
PS 我试图避免每次都重新渲染列表视图。我想分别重新渲染列表中的每个 ItemView。
var Item = Backbone.Model.extend({
});
var Items = Backbone.Collection.extend({
model: Item
});
var ItemView = Backbone.View.extend({
template: window.JST['item/list'],
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var ItemDetailView = Backbone.View.extend({
el: $('.detail .grid'),
template: window.JST['item/detail'],
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.render();
},
render: function() {
$(this.el).html('').fadeOut('fast', function() {
$(this.el).html(this.template(this.model.toJSON())).fadeIn();
}.bind(this));
return this;
}
});
// for the Items collection
var ItemsView = Backbone.View.extend({
el: $('.items ol.grid'),
initialize: function() {
_.bindAll(this, 'render');
},
render: function() {
// need to put this as the first item in the list
$(this.el).html('<li class="listHeader"></li>');
// iterate over the collection and render each ItemView separately
this.collection.each(function(l) {
var lv = new ListView({ model: l, collection: this.collection });
var html = lv.template(lv.model.toJSON());
$(this.el).append(html);
}.bind(this));
}
});