Espinha dorsal.Marionete, itens de coleção em uma grade (sem tabela)

Question

Eu estou tentando descobrir como efetivamente mover uma coleção de modelos para um padrão de grade na vista.

Esta é uma questão sobre a Linha/Coluna princípio de uma simples coleção.

Dizem que eu tenho o seguinte Coleção:

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

Eu quero que ele seja exibido, tais como:

Grade:

"teste 1" "teste 2" "teste 3"

"teste 4" teste "5" "teste de 6"

No twitter bootstrap eu iria escrever isso:

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

Eu tentei substituir o appendHtml da minha CompositeView:

appendHtml: function(compositeView, itemView, index){
    ... 
    if ((index % 3) === 0  || lastelement){
        ... append
    }
} 

Mais diretamente essa implementação:

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

                    }

Esse método, porém, gerou muitos bugs, estranho erros ao adicionar / excluir itens.

Deve criar um método que gera um conjunto de 3 itens da nova coleção?

Assim, em vez de:

Collection -> Item

Eu posso fazer

Collection -> Collection -> Item

Agora eu também tentei essa implementação, não funciona como esperado quando a adição / exclusão de itens, também gerou itens desconhecidos quando usando para trás/para a frente setas para ir para a página específica:

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

Eu tive quase o mesmo problema, e @g00fy a resposta tem a minha apontou na direção certa.Em uma iteração inicial, eu usei o parse() o método em minha coleção para formatar os dados como grupos de "linhas" e "colunas".O que eu mais tarde correu estava querendo usar o mesmo conjunto de dados para um uso diferente -- mas meu analisar solução foi quebrar.

Em vez de criar uma segunda coleção + de busca, eu estou modificando os dados durante o exterior do modo de exibição inicializar.Aqui está o código:

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

E aqui está um trabalho de demonstração:

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

O que eu consegui descobrir foi como passar os dados agrupados a partir da grelha para as linhas como algo que eu poderia acessar facilmente ("isso.coleção").O que eu acabei fazendo foi para mover os dados para o novo genérico de objetos de Coleção, e na linha que estou recebendo-os atributos do modelo.Não dizendo que isso é o caminho a percorrer, mas funciona.

Answer 2

você pode querer usar: CompositeView (TableView) -> CompositeView (RowView) -> ItemView (ColumnView)

1º CompositeView (TableView) iria compor a mesa e passe de 3 objetos de coleção para RowView.

Você precisará alterar alguns internals em TableView para passar 3 objetos para RowView em vez de uma, ou você pode reestruturar a sua coleção para ser agrupados em linhas exemplo:

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

2º CompositeView (RowView) invalidaria a linha e a cada objeto em ItemView