2012-03-30 5 views
0

私は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> 

私はここにコーナーに自分自身を描いたことがありますか?

答えて

1

私のBackbone.Marionetteフレームワークでは、このように動作する「CompositeView」と呼ばれるビュータイプがあります。

コンポジットビューの基本的な考え方は、同じビュー内でモデルとコレクションをレンダリングできるということです。

テンプレートを使用して単一のモデルをレンダリングすることができます。また、そのモデルからコレクションを取得し、そのコレクション内の各モデルに対してビューをレンダリングすることもできます。デフォルトでは、コレクション内の各モデルをレンダリングするために、定義した同じ複合ビュータイプを使用します。 initializeメソッドを使用してコレクションのあるビューインスタンスに指示するだけで、再帰的な階層がレンダリングされます。

私はここで、JSFiddleにおける作業のデモを持っている:私は、私が直接あなたの質問に答えていないよ知ってhttps://github.com/derickbailey/backbone.marionette

を、:http://jsfiddle.net/derickbailey/AdWjU/

そして、あなたはここで、マリオネットのソースコードやドキュメントを取得することができますあなたが考えるよりもはるかに多くのことがあります。うまくいけば、デモとプラグインはあなたに役立つでしょう。

0

私は解決策を見つけました...「フレームワークのような」感じはしませんが、シンプルで機能するようです。

Iは、2つのビューを有する:

  1. ItemView
  2. CollectionView

次のように一般的なフローである。

ItemView.renderは()に<div>要素を付加することにより、それ自体をレンダリングページ内の既知のHTML要素。次は、コレクションに含まれるCollectionViewを作成することです。 CollectionViewは、コレクション内の各アイテムのItemViewを作成します。

解決策だった:

ItemViewが自分自身を追加し、そうすることで、新たな<div>を作成した直後、私は、新たに追加さ<div>にCollectionViewのel属性を設定します。 CollectionViewは更新されたel属性を使用して、コレクション内の各Itemに対して作成しているItemViewのel属性を設定します。そして、各ItemViewが自身をレンダリングするとき、それはその '親' <div>にそうしています。

関連する問題