title: Simple way to create a grid with Handlebars.js?
body: <p>I'm attempting to generate a grid of divs five elements wide from the objects in this array:</p>
  
  <pre><code>[{n:'a'},{n:'b'},{n:'c'},{n:'d'}...{n:'y'}];
  </code></pre>
  
  <p>The array may contain between 1 and 50 objects, and the data format is a 1d array coming from a Spine.js model.  In order to separate data and presentation, I'm hoping to keep the data in a 1d array, and use the view (handlebars template) code to start a new row on every 5th item, like so:</p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt; a &lt;/div&gt;
      &lt;div class="cell"&gt; b &lt;/div&gt;
      &lt;div class="cell"&gt; c &lt;/div&gt;
      &lt;div class="cell"&gt; d &lt;/div&gt;
      &lt;div class="cell"&gt; e &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt; f &lt;/div&gt;
      etc...
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a solution working by returning the whole string in a helper function.  Only my template looks like:</p>
  
  <pre><code>&lt;script id="grid-template" type="text/x-handlebars-template"&gt;
    {{#grid}}
    {{/grid}}
  &lt;/script&gt;
  </code></pre>
  
  <p>That seems like it defeats the point of using templates.  Is there a simple way to create a grid like the above, where the code resides mostly in the template?</p>
  
  <h2>[Edit] Solution</h2>
  
  <p>Modify the data in the controller, based on @Sime's answer below.</p>
  
  <p>Template code:</p>
  
  <pre><code>&lt;script id="grid-template" type="text/x-handlebars-template"&gt;
    {{#rows}}
      &lt;div class="row"&gt;
        {{#cells}}
          &lt;div class="cell"&gt;
            {{n}}
          &lt;/div&gt;
        {{/cells}}
      &lt;/div&gt;
    {{/rows}}
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller rendering code ():</p>
  
  <pre><code>  this.data=[{n:'a'},{n:'b'},{n:'c'},{n:'d'}...{n:'y'}]; // previously set
    this.rows=[];
    var step=5,
    i=0,
    L=this.data.length;
    for(; i&lt;L ; i+=step){
      this.rows.push({cells:this.data.slice(i,i+step)});
    };
  
    this.el.html(this.template(this));
  </code></pre>