骨干.marionette，网格中的收集项目（没有表）

StackOverflow https://stackoverflow.com//questions/12674757

  •  12-12-2019
  •  | 
  •  

题

我试图弄清楚如何将模型的集合移动到视图中的网格模式。

这是一个关于简单集合的行/列原理的问题。 说我有以下集合： 

[
    {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>
.

我尝试覆盖我的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)

    }

});
.

有帮助吗？

解决方案

我跑进了几乎是相同的问题，@ g00fy的答案让我的朝向正确的方向指出。在提前迭代中，我在我的集合上使用了parse（）方法以将数据重新格式化为“行”和“列”组。我以后跑进的是想要使用相同的数据集不同使用 - 但我的解析解决方案正在破坏它。

而不是创建第二个集合+ 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”）。我最终做了什么是将数据移动到新的通用集合对象中，并且在我从模型属性中获取它的行。不是说这是 的方式，但它有效。

其他提示

您可能想要使用： CompositeView（TableView） - > CompositeView（ROWVIEW） - > ItemView（ColumNView）

1st compositeview（tableview）将呈现表并将3个对象从集合传递给 Rowview 。

需要在 tableview 中更改一些内部，以将3个对象传递给 RowView 而不是一个，或者您可以重组为在Rows中分组的集合示例： 

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

2nd compositeview（rowview）将呈现行和每个对象在 itemview 中

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top