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

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

希望这有帮助！

Answer 2

您可以对项目进行分组

//helper
Handlebars.registerHelper('grouping_by', function(groupSize, source, options) {
    var out = "", subcont = [], i;
    if (source && source.length > 0) {
      for (i = 0; i < source.length; i++) {
        if (i > 0 && i % groupSize === 0) {
          out += options.fn(subcont);
          subcont = [];
        }
        subcont.push(source[i]);
      }
      out += options.fn(subcont);
    }
    return out;
  });

//template
<div class="container">
  {{#grouping_by 3 items}}
  <div class="row">
    {{#each this }}
    {{ item }}  
    {{/each}}
  </div>
  {{/grouping_by}}
</div>

这种方法让您可以选择组大小，以便您可以通过模板重复使用。

流星＆amp;把手：每个N项后的新行

2 个答案: