Question

我试图想象如何在视图中有效地将一组模型移动到网格模式。

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

说我有以下 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"}
]

我希望它显示如下：

网格：

“test 1”“test 2”“test 3”

“test 4”“test 5”“test 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>

我尝试覆盖我的CompositeView：

的appendHtml

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对象中，并且在行中我从模型属性中获取它。不是说这是的方式，但它有效。

Answer 2

你可能想要使用： CompositeView（TableView） - ＆gt; CompositeView（RowView） - ＆gt; ItemView（ColumnView）

第一个 CompositeView（TableView）将渲染表并将3个对象从集合传递到 RowView 。

您需要更改 TableView 中的一些内部结构，以便将3个对象传递给 RowView 而不是一个，或者您可以重新构建您的集合以按行分组示例：< / p>

[
    [{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"}]
]

第二个 CompositeView（RowView）会在 ItemView 中呈现行和每个对象

Backbone.Marionette，网格中的集合项（无表）

2 个答案: