Backbone.Marionette,网格中的集合项(无表)

Question

我试图想象如何有效地将一组模型移动到视图中的网格图案.

这是关于简单集合的行/列原则的问题.

说我有以下收藏:

[
    {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 bootstrap中我会写这个:

<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)

    }

});

Answer 1

我遇到了几乎相同的问题,@ g00fy的回答让我指出了正确的方向.在早期的迭代中,我在我的集​​合中使用了parse()方法,将数据重新格式化为"rows"和"columns"组.我后来遇到的是想要使用相同的数据集用于不同的用途 - 但我的解析解决方案正在破坏它.

而不是创建第二个集合+ fetch,我在外部视图的初始化期间修改数据.这是相关代码:

Views.GridRow = Backbone.Marionette.CompositeView.extend({
    template: "#row-template",
    itemView: Views.GridItem,
    itemViewContainer: "div.row-fluid",
    initialize: function() {
        this.collection = new Backbone.Collection(_.toArray(this.model.attributes));
    }
});

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));
    }
});

这是一个有效的演示:

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

我无法弄清楚的是如何将分组数据从网格传递到行,这是我可以轻松访问的内容("this.collection").我最终做的是将数据移动到新的通用Collection对象中,并且在行中我从模型属性中获取它.不是说这是要走的路,但它确实有效.