meteor & Handlebars : new row after every N-items

Question

我有这个标记:

<div class="row">
  {{#each items}}
    <div class="col-md-4>{{ItemHere}}</div>
  {{/each}}
</div>

我需要将行中的每 3 个元素分组，例如:

<div class="row">
  <div class="col-md-4>Item1</div>
  <div class="col-md-4>Item2</div>
  <div class="col-md-4>Item3</div>
</row>
<div class="row">
  <div class="col-md-4>Item4</div>
  <div class="col-md-4>Item5</div>
  <div class="col-md-4>Item6</div>
</row>
...

如何使用 Blaze 实现这一目标？是否有任何内置函数或助手？

Answer 1

我会创建一个助手来将数据分成数组数组:

// Helper:
Template.templateName.helpers({
  getItemsInGroupsOfThree( array ) {
    var result = [];
    var currentResultIndex = 0;
    for( var i = 0; i < array.length; i++ ) {
      if( i % 3 === 0 ) {
        if( i !== 0 ) currentResultIndex++;
        result.push({ items: [ array[i] ] });
      } else {
        result[ currentResultIndex ].items.push( array[i] );
      }
    }
    return result;
  }
});

//Template:
{{#each itemGroup in getItemsInGroupsOfThree items}}
  <div class="row">
    {{#each item in itemGroup.items}}
      <div class="col-md-4>
        {{ItemHere}}
      </div>
    {{/each}}
  </div>
{{/each}}

帮助器创建一个数组数组，每个数组中最多包含三个项目。您基本上使用创建的组来添加每一行，然后组中的项目创建列和输出值。

希望这有帮助!