Einfache Möglichkeit zum erstellen eines Rasters mit Handlebars.js?

Ich bin beim erstellen eines raster von divs fünf Elemente, die weit von den Objekten, die in diesem array:

[{n:'a'},{n:'b'},{n:'c'},{n:'d'}...{n:'y'}];

Array enthalten kann zwischen 1 und 50 Objekte, und das Daten-format ist ein 1d-array aus einer Spine.js Modell. Um die Trennung von Daten und Präsentation, die ich bin der Hoffnung, zu halten die Daten werden in einem 1d-array, und verwenden Sie die Ansicht (LENKER-template) - code, um eine neue Zeile auf jedem 5. Element, etwa so:

<div class="grid">
  <div class="row">
    <div class="cell"> a </div>
    <div class="cell"> b </div>
    <div class="cell"> c </div>
    <div class="cell"> d </div>
    <div class="cell"> e </div>
  </div>
  <div class="row">
    <div class="cell"> f </div>
    etc...
</div>

Habe ich eine Lösung durch Rücksendung der ganze string in eine helper-Funktion. Nur mein template sieht wie folgt aus:

<script id="grid-template" type="text/x-handlebars-template">
  {{#grid}}
  {{/grid}}
</script>

Dass scheint, wie es besiegt den Punkt der Verwendung von Vorlagen. Gibt es eine einfache Möglichkeit, ein raster zu erstellen, wie das oben, wo der code befindet sich meist in der Vorlage?

[Bearbeiten] Lösung

Ändern der Daten in den controller, basierend auf dem @Sime ' s Antwort unten.

Template-code:

<script id="grid-template" type="text/x-handlebars-template">
  {{#rows}}
    <div class="row">
      {{#cells}}
        <div class="cell">
          {{n}}
        </div>
      {{/cells}}
    </div>
  {{/rows}}
</script>

Controller rendering 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<L ; i+=step){
    this.rows.push({cells:this.data.slice(i,i+step)});
  };

  this.el.html(this.template(this));