Question

我有一个Handlebars模板，可以在我的页面上插入img元素。图片网址来自一个可以最多 8个项目的数组，但我只想插入前4个。

像这样的简单{{#each}}块会为每个项目插入img：

{{#each items}}
    <img src="{{item.url}}" />
{{/each}}

我如何＆＃34;停止＆＃34;前4项之后的{{#each}}？或者换句话说，如果数组中的索引小于4（0到3），我怎么告诉它只插入img元素？

我知道我可以用{{@index}} 输出当前索引，但我似乎无法在{{#if}}块中使用它。换句话说，这不起作用：

{{#each items}}
    {{#if {{@index}} < 4}}
    <img src="{{item.url}}" />
    {{/if}}
{{/each}}

我该怎么做？

Answer 1

我认为最简单的方法是在将传递给已编译的模板函数之前将数组.slice(0, 4)，切片。

但是，如果由于某种原因，这不是一个选项，我想你必须创建一个自定义助手：

Handlebars.registerHelper('firstFour', function (context, options) { var result = ''; var length = Math.min(context.length, 4); for (var i = 0; i < length; i++) { result += options.fn(context[i]); } return result; });

你的模板看起来像这样：

{{#firstFour items}} <img src="{{this.url}}" /> {{/firstFour}}

在每个块的Handlebars中使用索引值

1 个答案: