web-dev-qa-db-ja.com

どのようにHandlebarsの各ヘルパーでインデックスを取得するには？

私は自分のプロジェクトでテンプレート作成にHandlebarsを使っています。 Handlebarsで "each"ヘルパーの現在の繰り返しのインデックスを取得する方法はありますか？

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

Handlebarsの新しいバージョンではインデックス（またはオブジェクトの繰り返しの場合はkey）は標準で各ヘルパーにデフォルトで提供されています。

抜粋： https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

現在の配列項目のインデックスは、しばらく前から@indexを介して利用できました。

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

オブジェクトの反復には、代わりに@keyを使用してください。

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

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

配列の場合：

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

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

これをありがとう tip 。

19
Ryan Lewis

ハンドルバーバージョン3.0以降では、

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

この特定の例では、userは現在のコンテキストと同じ値を持ち、userIdは反復のインデックス値を持ちます。ブロックヘルパーセクションの - http://handlebarsjs.com/block_helpers.html を参照してください。

12
Ember Freak

私はこれが遅すぎることを知っています。しかし、私は以下のコードでこの問題を解決しました：

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

ありがとう。

12
Naitik

配列：

{{#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にアクセスできます。

6
RegarBoy