title: Backbone.Marionette, collection items in a grid (no table)
body: <p>I am trying to figure how to effectivly move a collection of models to a grid pattern in the view.</p>
  
  <p>This is a question about Row/Column principle of a simple collection.</p>
  
  <p>Say I have the following <em>Collection</em>:</p>
  
  <pre><code>[
      {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"}
  ]
  </code></pre>
  
  <p>I want it to be displayed such as:</p>
  
  <p>Grid:</p>
  
  <p>"test 1" "test 2" "test 3"</p>
  
  <p>"test 4" "test 5" "test 6"</p>
  
  <p>In twitter bootstrap I would write this:</p>
  
  <pre><code>&lt;div id="myContainer"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span4"&gt;test 1&lt;/div&gt;
          &lt;div class="span4"&gt;test 2&lt;/div&gt;
          &lt;div class="span4"&gt;test 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span4"&gt;test 4&lt;/div&gt;
          &lt;div class="span4"&gt;test 5&lt;/div&gt;
          &lt;div class="span4"&gt;test 6&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried overriding the appendHtml of my <code>CompositeView</code>:</p>
  
  <pre><code>appendHtml: function(compositeView, itemView, index){
      ... 
      if ((index % 3) === 0  || lastelement){
          ... append
      }
  } 
  </code></pre>
  
  <p>More directly this implementation:</p>
  
  <pre><code>                    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 = $('&lt;div class="row-fluid" /&gt;');
  
                              for(var i = 0; i &lt; this.cacheColumns.length; i++){
  
                                      row.append(this.cacheColumns[i]);                               
  
                              }
  
                              this.cacheColumns = [];
  
                              collectionView.$(".jsListImages").append(row);
  
                      }
  </code></pre>
  
  <p>This method however generated lots of bugs, weird bugs when adding / deleting items.</p>
  
  <p>Should create a method that generates a collection of 3 items a new collection?</p>
  
  <p>So instead of:</p>
  
  <pre><code>Collection -&gt; Item
  </code></pre>
  
  <p>I can do</p>
  
  <pre><code>Collection -&gt; Collection -&gt; Item
  </code></pre>
  
  <p>Now I also tried this implementation, didn't work as expected when adding / deleting items, also generated unknown items when using back/forward arrows to go into the specific page:</p>
  
  <pre><code>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 = $('&lt;div class="row-fluid" /&gt;');
  
              for ( var i = 0; i &lt; this.cacheColumns.length; i++) {
  
                  row.append(this.cacheColumns[i]);
  
              }
  
              this.cacheColumns = [];
  
              collectionView.$(".jsListImages").append(row);
  
          }
  
      },
  
      onRender : function() {
  
          console.log(this.collection)
  
      }
  
  });
  </code></pre>