292

プロジェクトのテンプレートにハンドルバーを使用しています。ハンドルバーの「各」ヘルパーの現在の反復のインデックスを取得する方法はありますか?

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

7 に答える 7

555

Handlebars の新しいバージョンでは、インデックス (またはオブジェクトの反復の場合はキー) がデフォルトで標準の each ヘルパーと共に提供されます。

からのスニペット: https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

現在の配列項目のインデックスは、@index を介してしばらくの間利用可能でした:

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

オブジェクトの反復には、代わりに @key を使用します。

{{#each object}}
    {{@key}}: {{this}}
{{/each}}
于 2013-01-01T19:56:28.190 に答える
18

これは、Ember の新しいバージョンで変更されました。

配列の場合:

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

#each ブロックがオブジェクトに対して機能しなくなったようです。私の提案は、独自のヘルパー関数をロールすることです。

このヒントをありがとう。

于 2014-07-09T21:12:20.613 に答える
14

I know this is too late. But i solved this issue with following Code:

Java Script:

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

if you want start your index with 1 you should do following code:

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

Thanks.

于 2015-05-08T11:29:11.160 に答える