Marionetteを使用してコレクションビューのアイテムをグループ化する

Question

私は、バックボーンとmarionette.jsを使用してアプリケーションを構築しています。コレクションビューを使用していくつかのアイテムを提示し、それらをフィルタリング、並べ替え、グループ化することを計画しています。

実際にグループ化された方法でhtmlを実際に追加するための優れたデザインアイデアがあるかどうかは疑問でした。私はいくつかのアイデアを持っていますが、誰かがより良いデザインになるかどうかを知りたいのかどうか疑問に思っていました。

最初のアイデアは、コレクションビューでappendHtmlメソッドを変更することです。グループ化が有効な場合は、appendHtml関数で子グループのビンを検索または作成し、その中に子ビューを配置できます。

appendHtml: function(collectionView, itemView, index){ 
    var $container = this.getItemViewContainer(collectionView); 

    // get group from model 
    var groupName = itemView.model.get("group"); 

    // try to find group in child container 
    var groupContainer = $container.find("." + groupName); 

    if(groupContainer.length === 0){ 
    // create group container 
    var groupContainer = $('<div class="' + groupName + '">') 
    $container.append(groupContainer); 
    } 

    // Append the childview to the group 
    groupContainer.append(itemView); 
} 

私の第二の考えは、この1つは、それはより多くの仕事であるかもしれないように思えるが、また、限りコードとして少し良いかもしれない...最初のグループにコレクションをばらばらにして、多分複数のビューをレンダリングすることです構造が関係している。

コメントや意見を引き出すのはすばらしいことでしょう。

おかげ

Answer 1

はたぶんあなたが探しているではない正確に何HTHが、ここでは多少の関連質問です：

Backbone.Marionette, collection items in a grid (no table)

その問題に対する私のソリューション - としてレンダリングすることができ1つのフェッチされたコレクションは、リストまたはグリッド（「行でグループ化されたアイテム」）は、「ラッパー」CompositeViewで_.groupBy（）を使用し、変更されたデータをチェーンを経て別のCompositeView（行）に渡してからItemViewに渡しました。

http://jsfiddle.net/bryanbuchs/c72Vg/

Answer 2

私はあなたが示唆ものの両方を行ってきた、そして彼らの両方がうまく機能。それは主にあなたが好むものと、あなたのシナリオに合ったものとに大きく分かれています。

多くの階層モデル/コレクションプラグインまたは独自の階層コードのいずれかを使用して既にグループ化された階層にあるデータがある場合は、グループのリストをレンダリングし、おそらく簡単でしょう。

データがフラットであるが、グループ化するフィールドがある場合、appendHtmlの変更はおそらくより簡単になります。

Answer 3

これはDerick'sとbryanbuchs'の回答に加えて、次のとおりです。

Views.Grid = Backbone.Marionette.CompositeView.extend({ 
    template: "#grid-template", 
    itemView: Views.GridRow, 
    itemViewContainer: "section", 
    initialize: function() { 
     var grid = this.collection.groupBy(function(list, iterator) { 
      return Math.floor(iterator/4); // 4 == number of columns 
     }); 
     this.collection = new Backbone.Collection(_.toArray(grid)); 
    } 
}); 

はここでデモです。私のメソッドは、メインコレクションビューと別のコレクションビューをchildViewとして使用します。

コレクションビューには、モデルがビューのコレクションに追加されるたびに呼び出される 'addChild'メソッドがあります。 'addChild'メソッドは、子ビューをレンダリングし、それをコレクションビューのHTMLに特定のインデックスで追加する役割を担います。ソースコードはgithub hereにあります。

「addChild」メソッドからわかるように、「buildChildView」メソッドが呼び出されます。このメソッドは実際にビューを構築します。

// Build a `childView` for a model in the collection. 
buildChildView: function(child, ChildViewClass, childViewOptions) { 
var options = _.extend({model: child}, childViewOptions); 
return new ChildViewClass(options); 
} 

したがって、グループ化基準が一致する場合は、「addChild」メソッドをオーバーライドして元のメソッドを呼び出すことができます。オーバーライドされた 'buildChildView'メソッドでは、グループ（コレクションのサブセット）を別のMarioette.CollectionViewであるchildViewに渡すことができます。

例：

MyCollectionView.prototype.addChild = function(child, ChildView, index) { 
    if(mycriteria){ 
     return ProductGroup.__super__.addChild.apply(this, arguments); 
    } 
}; 

MyCollectionView.prototype.buildChildView = function(child, ChildViewClass, 
childViewOptions) { 

    options = _.extend({ 
     collection: "Pass your group collection which is a subset of your main collection"}, 
     childViewOptions 
    ); 

    return new ChildViewClass(options); 
    };