Handlebars循环问题：如何每4个元素为一组展示8个元素

嘿，刚接触Handlebars遇到这种小问题太正常啦，我来帮你快速搞定！

你已经知道用@index判断来展示前4个元素了，要展示剩下的4个其实很简单，只需要把判断条件改成索引大于等于4就行——因为Handlebars的@index是从0开始计数的，所以索引4到7正好对应第5到8个元素，也就是你要的剩余4个。

完整的模板代码示例 #

<!-- 展示前4个元素 -->
<div class="first-group">
  {{#each items}}
    {{#if @index '<' 4}}
      <p>元素{{@index add 1}}: {{this}}</p> <!-- add 1是为了显示1-8的编号，而非0-7 -->
    {{/if}}
  {{/each}}
</div>

<!-- 展示剩余4个元素 -->
<div class="second-group">
  {{#each items}}
    {{#if @index '>=' 4}}
      <p>元素{{@index add 1}}: {{this}}</p>
    {{/if}}
  {{/each}}
</div>

小提示：让代码更清晰的进阶方法 #

如果觉得每次都遍历整个数组有点冗余，你也可以在传入模板的数据里提前把数组分成两个部分，比如在JS里预处理：

// 假设你的原始数组是items
const items = [1,2,3,4,5,6,7,8];
const templateData = {
  firstFour: items.slice(0, 4),
  lastFour: items.slice(4)
};

然后模板里就可以直接分别遍历两个数组，代码更简洁：

<div class="first-group">
  {{#each firstFour}}
    <p>元素{{@index add 1}}: {{this}}</p>
  {{/each}}
</div>

<div class="second-group">
  {{#each lastFour}}
    <p>元素{{@index add 5}}: {{this}}</p> <!-- 这里add 5是因为从第5个元素开始计数 -->
  {{/each}}
</div>

两种方法都能达到你的需求，刚接触的话先从第一种方法入手就行，等熟悉了再尝试第二种更优雅的方式～

内容的提问来源于stack exchange，提问作者James Osguthorpe