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

IT技术 javascript handlebars.js
2021-02-10 20:14:37

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

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

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


摘自:https : //github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

当前数组项的索引已经通过@index 提供了一段时间:

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

对于对象迭代,请改用 @key:

{{#each object}}
    {{@key}}: {{this}}
{{/each}} 
这工作正常,但如果您使用 @ 具有特殊含义的 Web 框架,请确保转义“@”字符:)
2021-03-27 20:14:37
我试图在各种情况下实现这一点,每次我在控制台上遇到错误时。 Uncaught SyntaxError: Unexpected token ,
2021-03-28 20:14:37
值得一提的是为V1.2.0@index并且@first现在支持的对象每次迭代过。
2021-03-29 20:14:37
如果您使用的是 ASP.Net MVC Razor,您可以使用 @@ 转义,即 {{@@index}}
2021-04-12 20:14:37

这在较新版本的 Ember 中发生了变化。

对于数组:

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

看起来 #each 块不再适用于对象。我的建议是为它推出你自己的辅助函数。

谢谢你的提示

在车把版本 3.0 以后,

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

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

我知道这已经太晚了。但我用以下代码解决了这个问题:

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

谢谢。

谢谢,您澄清了 @index 从 0 开始,并提供了一种将其更改为基于 1 的索引的方法。正是我所需要的。
2021-04-01 20:14:37

数组:

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