javascript - 在每个 block 的 Handlebars 内部使用索引值

Question

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

像这样的简单 {{#each}} block 会为每个项目插入一个 img:

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

如何在前 4 项之后“停止”{{#each}}？或者，换句话说，如果数组中的索引小于 4(0 到 3)，我如何告诉它仅插入 img 元素？

我知道我可以使用{{@index}}输出当前索引，但我似乎无法在{{# if}} block 。换句话说，这是行不通的:

{{#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}}