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

Question

我试图从这个数组中的对象生成一个宽五行的div网格:

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

该数组可以包含1到50个对象,数据格式是来自Spine.js模型的1d数组.为了分离数据和表示,我希望将数据保存在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>

这似乎违背了使用模板的要点.是否有一种简单的方法来创建如上所述的网格,其中代码主要位于模板中？

[编辑]解决方案

根据@ 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/