如何让Handlebars #each循环每输出10个值后换行？

绝对可以搞定这个问题！你可以利用Handlebars的内置特性和简单逻辑，轻松实现每输出10个值就换行的效果。下面给你两种实用的方案：

方案一：在模板中直接判断位置（借助自定义Helper） #

Handlebars本身提供了@index变量来获取当前循环元素的索引（从0开始），我们可以通过判断索引的位置，每10个元素就插入表格行的闭合和开启标签。不过需要先注册几个自定义Helper来实现加减、取模和相等判断：

第一步：注册自定义Helper（在JS文件中） #

// 注册加法Helper
Handlebars.registerHelper('add', function(a, b) {
  return a + b;
});

// 注册取模Helper
Handlebars.registerHelper('mod', function(a, b) {
  return a % b;
});

// 注册相等判断Helper
Handlebars.registerHelper('eq', function(a, b) {
  return a === b;
});

第二步：修改模板代码 #

<table>
  <!-- 先开启第一行 -->
  <tr>
    {{#each ssarr ../Maxss this}}
      <td>{{this}}</td>
      <!-- 当当前元素是第10、20...个时，换行 -->
      {{#if (eq (mod (add @index 1) 10) 0)}}
        </tr><tr>
      {{/if}}
    {{/each}}
  </tr>
</table>

这里我们把@index加1（转换成从1开始的计数），然后对10取模，当结果为0时说明已经到了每10个的末尾，此时闭合当前<tr>并开启新的一行。

方案二：先将数组分组（更清晰的逻辑） #

另一种更直观的方式是先在JS层把原始数组分割成每10个元素一组的二维数组，然后在模板中嵌套循环，外层循环行，内层循环列。这种方式把数据处理逻辑放在JS里，模板会更简洁：

第一步：在JS中处理数组 #

// 假设你的原始数组是ssarr
const chunkedSSArr = [];
for (let i = 0; i < ssarr.length; i += 10) {
  // 每次截取10个元素作为一组
  chunkedSSArr.push(ssarr.slice(i, i + 10));
}
// 将分组后的数组传递给模板（比如把chunkedSSArr加入模板数据中）

第二步：修改模板代码 #

<table>
  {{#each chunkedSSArr}}
    <tr>
      {{#each this}}
        <td>{{this}}</td>
      {{/each}}
    </tr>
  {{/each}}
</table>

这种方法逻辑更清晰，模板不需要复杂的条件判断，后期维护起来也更方便，推荐优先考虑这种方式。

内容的提问来源于stack exchange，提问作者Marcus Frändén