javascript - 车把计数器#each

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
})();

这是一个 jsFiddle 来演示：http: //jsfiddle.net/willslab/T5uKW/1/

虽然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

当前方法，

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

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

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

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

Answer 7

您可以仅从列表内的索引中获取价值。

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

Answer 8

这对我有用

{{#each posts}}
    <tr>               
       <td>{{@index}} </td>
       <td>{{name}}</td>
    </tr>    
{{/each}}