Meteor & Handlebars：每 N 项后的新行

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>

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

Meteor & Handlebars：每 N 项后的新行

Meteor & Handlebars: new row after every N-items

handlebars.js

meteor

meteor-blaze