如何获取每个助手中的索引?


267

我正在使用Handlebars在我的项目中进行模板制作。有没有办法获取“每个”助手中当前迭代的索引?

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

1
您可以注册自己的助手来执行此操作,例如:gist.github.com/1048968或:pastebin.com/ksGrVYkz
stusmith 2012年

1
我向Gist示例添加了另一个解决方案,该示例可与handlebars-1.0.rc.1.js一起使用。gist.github.com/1048968#gistcomment-617934
mlienau

Answers:


524

在较新版本的Handlebars中,默认情况下会为每个助手提供索引(在对象迭代的情况下为键)。


来自的片段:https : //github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

当前数组项的索引已经可以通过@index使用一段时间了:

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

对于对象迭代,请使用@key代替:

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

57
我试图在各种情况下实现此目标,每次在控制台上出现错误时。Uncaught SyntaxError: Unexpected token ,
waltfy

1
这可以正常工作,但如果使用@则具有特殊含义的Web框架,请确保转义'@'字符:)
AlexG 2014年

7
值得一提的是为V1.2.0@index并且@first现在支持的对象每次迭代过。
WynandB 2014年

6
如果您使用的是ASP.Net MVC Razor,请使用@@逃脱,即{{@@index}}
masty 2014年


19

在新版本的Ember中,这已更改。

对于数组:

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

看起来#each块不再对对象起作用。我的建议是为此使用自己的帮助器功能。

感谢您的提示


14

我知道这为时已晚。但是我用下面的代码解决了这个问题:

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

谢谢。


1
谢谢,您澄清了@index从0开始,并提供了一种将其更改为基于1的索引的方法。正是我需要的。
Rebs

14

在3.0版以上的车把中,

{{#each users as |user userId|}}
  Id: {{userId}} Name: {{user.name}}
{{/each}}

在此特定示例中,用户将具有与当前上下文相同的值,而用户ID将具有用于迭代的索引值。请参阅- 块帮助器部分中的http://handlebarsjs.com/block_helpers.html


7

数组:

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

如果您有嵌套的对象,则可以key使用 {{@../key}}


0

从车把4.0版开始,

{{#list array}}
  {{@index}} 
{{/list}}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.