Meteor & Handlebars：每 N 项后的新行

Posted 2023-03-08

【中文标题】Meteor & Handlebars：每 N 项后的新行

【英文标题】：Meteor & Handlebars: new row after every N-items

【发布时间】：2016-06-11 08:56:47

【问题描述】：

我有这个标记：

<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 实现这一目标？是否有任何内置函数或助手？

【参考方案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

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

希望这会有所帮助！

【参考方案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>

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