各ヘルパーのハンドルバーでインデックスを取得するにはどうすればよいですか?


267

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

<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

1
Gistの例に、handlebars-1.0.rc.1.jsで動作する別のソリューションを追加しました。gist.github.com/1048968#gistcomment-617934
mlienau

回答:


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 2013

1
これは正常に機能しますが、@に特別な意味があるWebフレームワークを使用する場合は、「@」文字がエスケープされていることを確認してください:)
AlexG

7
それの価値のように、そのに注意V1.2.0@indexおよび@first今あまりにもオブジェクト上の各反復のためにサポートされています。
WynandB 2014

6
あなたはASP.Net MVCかみそりを使用している場合は、@@、すなわちで脱出{{@@index}}
masty


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 2017

14

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

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

この特定の例では、ユーザーは現在のコンテキストと同じ値を持ち、userIdは反復のインデックス値を持ちます。参照- ブロックヘルパーセクションの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}}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.