Простой способ создать сетку с помощью Handlebars.js?

Я пытаюсь создать сетку из блоков div шириной в пять элементов из объектов в этом массиве:

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

Массив может содержать от 1 до 50 объекты, а формат данных - это 1d-массив, полученный из модели Spine.js. Чтобы разделить данные и представление, я надеюсь сохранить данные в 1d-массиве и использовать код представления (шаблон ручки), чтобы начать новую строку для каждого 5-го элемента, например:

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

У меня есть решение работает, возвращая всю строку во вспомогательной функции. Только мой шаблон выглядит так:

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

Похоже, он лишает смысла использование шаблонов. Есть ли простой способ создать сетку, подобную приведенной выше, где код в основном находится в шаблоне?

[Edit] Решение

Измените данные в контроллере, основываясь на ответе @Sime ниже.

Код шаблона:

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

Код рендеринга контроллера ():

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