Javascript 使用handlebar.js创建网格的简单方法？

我正试图从该数组中的对象生成一个五个元素宽的div网格：

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

该数组可能包含1到50个对象，数据格式为来自Spine.js模型的1d数组。为了分离数据和表示，我希望将数据保存在1d数组中，并使用view（Handlebar模板）代码在每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>

A.
B
C
D
E
F
等

我有一个解决方案，通过在助手函数中返回整个字符串。只有我的模板看起来像：

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

{{{#网格}
{{/grid}

这似乎违背了使用模板的意义。有没有一种简单的方法来创建上面这样的网格，其中代码主要驻留在模板中

[编辑]解决方案 根据下面@Sime的回答修改控制器中的数据

模板代码：

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

{{#行}
{{#细胞}
{{n}}
{{/cells}
{{/行}

控制器呈现代码（）：

this.data=[{n:'a'}，{n:'b'}，{n:'c'}，{n:'d'}…{n:'y'}]；//先前设定
this.rows=[]；
var阶跃=5，
i=0，
L=此.data.length；
对于（；i尝试使用表标记示例：

<table>
<thead>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
</thead>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</tbody>
</table>


总目1
总目2
总目3
第1栏
第2栏
第3栏

您还可以提供ID和类作为它们的属性，以便于操作策略。
因此，模板应该是：

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

实时演示：
需要比表格更大的灵活性，尽管这不是重点。这个答案没有使用把手，这是主要的挑战。网格的CSS已经可以使用了。@Adam更大的灵活性？你能详细说明吗？@Šime表格不允许单元格重叠等视觉效果。Šime，谢谢。数据来自我是Spine.js模型。为了保持数据和表示分离，我尝试使用视图代码（即模板和助手fn，如果需要）完全呈现数据.@Adam你能用你的数据结构更新你的问题吗？它是二维数组吗？@Adam好的，我已经更新了我的答案以反映新的信息。单元格的宽度和高度是否相同？
<script id="template" type="x-handlebars-template">
    <div class="grid">
        {{#each this}}
        <div class="row">
            {{#each this}}
            <div class="cell">{{n}}</div>
            {{/each}}
        </div>
        {{/each}}
    </div>
</script>

function transform ( arr ) {
    var result = [], temp = [];
    arr.forEach( function ( elem, i ) {
        if ( i > 0 && i % 5 === 0 ) {
            result.push( temp );
            temp = [];
        }
        temp.push( elem );
    });
    if ( temp.length > 0 ) {
        result.push( temp );
    }
    return result;
}