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

Question

我试图根据该数组中的对象生成一个由 5 个元素宽的 div 组成的网格：

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

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

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

[编辑]解决方案

根据下面@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));

Answer 1

因此，模板将是：

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

现场演示： http://jsfiddle.net/emfKH/3/

Answer 2

尝试使用表标签示例：

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

您还可以提供 id 和类作为其属性，以便于操作策略。