Handlebars技术咨询：如何不使用each遍历全部仅展示前4条数据

嘿，刚好我之前也遇到过类似的需求，给你分享几个实用的解决办法，挑适合你项目的来用就行：

方案1：后端提前截取数据（最推荐） #

如果你的数据是从后端传递到模板的，直接在后端处理完再传是最省事高效的——毕竟没必要把10条数据都传给只需要4条的页面。

比如你用Node.js/Express的话，传递数据的时候直接用数组的slice方法截取前4条：

// 假设data是你的10条数据数组
res.render('your-second-page', {
  items: data.slice(0, 4) // 只传前4条给模板
});

之后模板里还是用原来的{{#each items}}循环就行，完全不用改模板逻辑，干净利落。

方案2：模板内利用@index判断（无需额外代码） #

要是你不想动后端逻辑，只想在模板里控制显示数量，可以借助Handlebars内置的@index变量（它会记录当前循环的索引，从0开始），配合条件判断来过滤：

{{#each items}}
  {{!-- 只渲染索引小于4的条目（也就是前4条） --}}
  {{#if @index.lt 4}}
    <div>{{title}}</div> <!-- 这里替换成你的数据展示代码 -->
  {{/if}}
{{/each}}

注意：如果你的Handlebars版本比较旧，可能不支持@index.lt这种简写，那可以换成内置的比较辅助函数写法：

{{#each items}}
  {{#if (lt @index 4)}}
    <div>{{title}}</div>
  {{/if}}
{{/each}}

方案3：自定义limit辅助函数（灵活复用） #

如果你的项目里多处需要限制展示数量，那自定义一个辅助函数会更灵活，一次注册到处用：

首先在你的Handlebars初始化代码里注册辅助函数：

// 浏览器端或后端的Handlebars配置处
Handlebars.registerHelper('limit', function(array, limit) {
  // 先判断是不是数组，避免报错
  if (!Array.isArray(array)) return [];
  // 返回截取后的数组
  return array.slice(0, limit);
});

然后在模板里直接用这个辅助函数包裹数组：

{{#each (limit items 4)}}
  <div>{{title}}</div> <!-- 你的展示代码 -->
{{/each}}

这样不管你要限制前3条还是前5条，只要改辅助函数的第二个参数就行，非常方便。

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