Question

在Handlebars中，我说我有names我的集合

{{#each names}}
{{position}}
{{name}}
{{/each}}

其中{{position}}对于名字是1，对于第二个名称是2等。我是否必须将该职位作为密钥存储在集合中？

Answer 1

您可以使用内置的Handlebars @index表示法执行此操作：

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

@index将给出给定数组中每个项目的（从零开始）索引。

请注意，对于使用带有Razor视图引擎的Handlebars的用户，必须使用符号@@ index来避免编译错误。

有关更多内置助手，请参阅http://handlebarsjs.com/

Answer 2

Handlebars.registerHelper("counter", function (index){
    return index + 1;
});

用法：

{{#each names}}
    {{counter @index}}
    {{name}}
{{/each}}

Answer 3

虽然您无法使用任何本机Handlebars帮助程序执行此操作，但您可以创建自己的帮助程序。您可以调用Handlebars.registerHelper()，向其传递一个字符串，其中包含您要匹配的名称（位置），以及一个返回当前位置计数的函数。您可以跟踪调用registerHelper的闭包中的位置编号。下面是一个示例，说明如何注册一个名为position的帮助程序，该帮助程序应该与您的模板示例一起使用。

JavaScript的：

// Using a self-invoking function just to illustrate the closure
(function() {
    // Start at 1, name this unique to anything in this closure
    var positionCounter = 1;

    Handlebars.registerHelper('position', function() {
        return positionCounter++;
    });

    // Compile/render your template here
    // It will use the helper whenever it seems position
})();

这是一个证明：http://jsfiddle.net/willslab/T5uKW/1/

的jsFiddle

虽然帮助文件记录在handlebarsjs.com上，但我花了一些力气才弄清楚如何使用它们。感谢您的挑战，我希望有所帮助！

Answer 4

只有你必须使用{{@index}}

示例：

{{#.}}
<li class="order{{@index}}"> counter: {{@index}}</li>
{{/.}}

Answer 5

这是我的首选解决方案。注册扩展上下文的帮助程序以自动包含您的位置属性。然后使用新的块帮助器（例如#iter）代替#each。

Handlebars.registerHelper('iter', function (context, options) {
    var ret = "";

    for (var i = 0, j = context.length; i < j; i++) {
        ret += options.fn($.extend(context[i], {position: i + 1}));
    }

    return ret;
});

用法：

{{#iter names}}
    {{position}}
    {{name}}
{{/iter}}

改编自http://rockycode.com/blog/handlebars-loop-index/

Answer 6

你可以从列表中的索引中获取价值。

{{#each list}}
    @index
{{/each}}

Answer 7

当前方法，

自Handlebars API V2以来，它们已经包含了@number 它基本上是从1开始的迭代器的索引。

所以，这就是您可以做的。

{{#foreach names}}
{{@number}}
{{name}}
{{/foreach}}

参考：https://ghost.org/docs/api/v3/handlebars-themes/helpers/foreach/

Answer 8

这对我有用

<td>{{@index}}</td>

车把柜台#each

8 个答案: