首页 文章

如何在Handlebars中获得每个助手的索引？

提问于
浏览 次
235

我在我的项目中使用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>
javascript handlebars.js

5 回答

  • 19

    在较新版本的Handlebars索引（或对象迭代的情况下的键）默认情况下提供标准的每个帮助程序 .

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

    现在通过@index可以获得当前数组项的索引一段时间了：

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

    对于对象迭代，请使用@key代替：

    {{#each object}}
    {{@key}}: {{this}}
{{/each}}
    回复于
  • 480

    在较新版本的Ember中已经发生了变化 .

    对于数组：

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

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

    谢谢你tip .

    回复于
  • 12

    我知道这太晚了 . 但我用以下代码解决了这个问题：

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

    谢谢 .

    回复于
  • 4

    在车把3.0版以后，

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

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

    回复于
  • 9

    阵列：

    {{#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 父对象

    回复于

相关问题