モデルのコレクションをビュー内のグリッド パターンに効果的に移動する方法を理解しようとしています。
これは、単純なコレクションの行/列の原則に関する質問です。
次のCollectionがあるとします。
[
{id: 1, title="test 1"},
{id: 2, title="test 2"},
{id: 3, title="test 3"},
{id: 4, title="test 4"},
{id: 5, title="test 5"},
{id: 6, title="test 6"}
]
以下のように表示させたいです。
グリッド：
「テスト1」「テスト2」「テスト3」
「テスト4」「テスト5」「テスト6」
Twitter のブートストラップでは、次のように記述します。
<div id="myContainer">
<div class="row-fluid">
<div class="span4">test 1</div>
<div class="span4">test 2</div>
<div class="span4">test 3</div>
</div>
<div class="row-fluid">
<div class="span4">test 4</div>
<div class="span4">test 5</div>
<div class="span4">test 6</div>
</div>
</div>
私のappendHtmlをオーバーライドしてみましたCompositeView：
appendHtml: function(compositeView, itemView, index){
...
if ((index % 3) === 0 || lastelement){
... append
}
}
より直接的にこの実装：
this.cacheColumns.push(itemView.el);
// If current index (+1) has rest of 0 when we devide it by column amount
// OR
// End of array loop.
if (((index+1) % this.colAmount) === 0 || index == this.collection.length-1){
var row = $('<div class="row-fluid" />');
for(var i = 0; i < this.cacheColumns.length; i++){
row.append(this.cacheColumns[i]);
}
this.cacheColumns = [];
collectionView.$(".jsListImages").append(row);
}
ただし、この方法では、アイテムの追加/削除時に多くのバグ、奇妙なバグが発生しました。
新しいコレクションとして 3 つのアイテムのコレクションを生成するメソッドを作成する必要がありますか?
したがって、代わりに：
Collection -> Item
できます
Collection -> Collection -> Item
この実装も試してみましたが、アイテムの追加/削除時に期待どおりに機能せず、特定のページに移動するために戻る/進む矢印を使用すると不明なアイテムも生成されました:
View.ImageMultiUploader = Marionette.CompositeView.extend({
template : '#common-multi-imageuploader-composite',
itemView : ImageMultiItem,
colAmount : 3, // How many columns we got.
cacheColumns : [], // appendHtml uses this. don't change.
/**
* Custom implementation of appendHtml, using this, we can use row/column
* principle on a collection.
*/
appendHtml : function(collectionView, itemView, index) {
this.cacheColumns.push(itemView.el);
// If current index (+1) has rest of 0 when we devide it by column amount
// OR
// End of array loop.
if (((index + 1) % this.colAmount) === 0
|| index == this.collection.length - 1) {
var row = $('<div class="row-fluid" />');
for ( var i = 0; i < this.cacheColumns.length; i++) {
row.append(this.cacheColumns[i]);
}
this.cacheColumns = [];
collectionView.$(".jsListImages").append(row);
}
},
onRender : function() {
console.log(this.collection)
}
});