我在我的项目中使用模版把手。是否有一种方法可以获得句柄中“each”helper的当前迭代的索引?

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{this.key}}</td>
            <td>{{this.value}}</td>
         </tr>
     {{/each}}
</tbody>

当前回答

在车把版4.0以后,

{{#list array}}
  {{@index}} 
{{/list}}

其他回答

数组:

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

如果你有对象数组……你可以遍历子节点:

{{#each array}}
    //each this = { key: value, key: value, ...}
    {{#each this}}
        //each key=@key and value=this of child object 
        {{@key}}: {{this}}
        //Or get index number of parent array looping
        {{@../index}}
    {{/each}}
{{/each}}

对象:

{{#each object}}
    {{@key}}: {{this}}
{{/each}} 

如果你有嵌套对象,你可以访问父对象的键 {{@ . . /关键}}

在hbs中使用循环有点复杂

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{@index}}</td>
            <td>{{this}}</td>
         </tr>
     {{/each}}
</tbody>

了解更多

在车把版4.0以后,

{{#list array}}
  {{@index}} 
{{/list}}

我知道这太迟了。但是我用以下代码解决了这个问题:

Java脚本:

Handlebars.registerHelper('eachData', function(context, options) {
      var fn = options.fn, inverse = options.inverse, ctx;
      var ret = "";

      if(context && context.length > 0) {
        for(var i=0, j=context.length; i<j; i++) {
          ctx = Object.create(context[i]);
          ctx.index = i;
          ret = ret + fn(ctx);
        }
      } else {
        ret = inverse(this);
      }
      return ret;
}); 

HTML:

{{#eachData items}}
 {{index}} // You got here start with 0 index
{{/eachData}}

如果你想以1开始你的索引,你应该做以下代码:

Javascript:

Handlebars.registerHelper('eachData', function(context, options) {
      var fn = options.fn, inverse = options.inverse, ctx;
      var ret = "";

      if(context && context.length > 0) {
        for(var i=0, j=context.length; i<j; i++) {
          ctx = Object.create(context[i]);
          ctx.index = i;
          ret = ret + fn(ctx);
        }
      } else {
        ret = inverse(this);
      }
      return ret;
    }); 

Handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) {
    lvalue = parseFloat(lvalue);
    rvalue = parseFloat(rvalue);

    return {
        "+": lvalue + rvalue
    }[operator];
});

HTML:

{{#eachData items}}
     {{math index "+" 1}} // You got here start with 1 index
 {{/eachData}}

谢谢。

这在新版本的烬中有所改变。

数组:

{{#each array}}
    {{_view.contentIndex}}: {{this}}
{{/each}}

看起来#each块不再适用于对象。我的建议是为它滚动您自己的helper函数。

谢谢你的建议。