私はCollectionを持っています。コレクション内の各アイテムはそれ自身がCollectionである可能性があります。コレクションの各アイテムをレンダリングすることができ、実際にコレクションであるアイテムをレンダリングできます。私が持っている問題は、HTMLがデータ構造の階層的性質を反映するこの構造をレンダリングする方法です。現時点では、階層は平坦化されており、最後には<div>
という長いリストが1つあります。Backbone.jsフレームワークでお互いにビューを追加する
私は、単一のアイテムをレンダリングしても、ネストされたアイテムがレンダリング必要が存在するかどうかをチェックし、コレクション内の各項目の表示があります
ItemView = Backbone.View.extend({
el: $("div#ItemView"),
initialize: function() {
_.bindAll(this, 'render');
},
render: function() {
// Render a single item from the Collection
$(this.el).append('<div id=' + this.model.id + '></div>');
// Create a View to render the nested Collection
var collectionView = new CollectionView({ collection: this.model.nestedCollection });
collectionView.render();
return this;
}
});
今これは私の問題がどこにあるかもしれないですが、 CollectionViewは、レンダリングする必要がある各Itemに対してItemViewを作成します。これは、階層の再帰的性質がどのように処理されるかですが、フラット化は、ItemViewに常にすべての要素を追加する$( "div#ItemView")要素が同じであるために行われます。
CollectionsView = Backbone.View.extend({
initialize:function() {
_.bindAll(this, 'render');
},
render: function() {
var self = this;
// Iterate over collection, rendering each item
_(this.collection.models).each(function(item) {
var itemView = new ItemView({model: item});
itemView.render();
}, this);
return this;
}
});
私は$("div#ItemView")
ない「親」要素に項目を追加できるようにしたいと思います。私が終わるアップしてたいHTML構造のようなものになります:
<div>
<div>...</div>
<div>
<div>...</div>
...
</div>
...
</div>
私はここにコーナーに自分自身を描いたことがありますか?