アイテムのコレクションがあり、左側にアイテムを一覧表示し、右側に現在選択されているアイテムの詳細を表示するシンプルなインターフェイスを構築しています。
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));
}
});