web-dev-qa-db-ja.com

Handlebars.js：ネストされたそれぞれの親インデックスにアクセスする方法は？

各ループで親の@index値にアクセスする方法は？

以下を試しました：

{{#each company}}
{{#each employee}}
  {{../@index}} // how to access company index here?
{{/each}}
{{/each}}

これはエラーになります：

「ID」が必要ですが、「DATA」を取得しました

javascripthandlebars.js
45
Fdr

この例には構文エラーがあります。正しい構文は{{@../index}}。

将来のバージョンの言語でこれらのパラメーターのカスタム命名をサポートできる方法を検討しているので、これは対処しやすくなっています。 https://github.com/wycats/handlebars.js/issues/907

76
Kevin Decker

これは私のために働いた：

{{#each company}}
{{setIndex @index}}
{{#each employee}}
  {{../index}}
{{/each}}
{{/each}}

JS：

Handlebars.registerHelper('setIndex', function(value){
    this.index = Number(value + 1); //I needed human readable index, not zero based
});

companyオブジェクトにindexプロパティがないことを確認してください。

26
strah

回答：{{@../index}}

Handlebars docs から（「各」ヘルパーセクションの下部を参照）：

"ネストされたeachブロックは、専用のパスを介して相互作用変数にアクセスできます。たとえば、親インデックスにアクセスするには、{{@../index}} に使える。"

注：v1.3を使用しているので、少なくとも古いバージョンです。

注意：ヘルパーは最後の最良の選択肢です。 9/10より良い解決策があります。

7
jordanb

Ember v2.2.0に新しい構文があるようです。ここですべての答えを試しましたが、うまくいきませんでした。

私が見つけたのは、親ループのインデックスと子ループのインデックスに名前を付けることでした。

{{#each parents as |parent parentIndex|}}
    {{parentIndex}}
    {{#each children as |child childIndex|}}
        {{parentIndex}}
        {{childIndex}}
    {{/each}}
{{/each}}
4
Andrew Toy

ヘルパーメソッドを登録します。

Handlebars.registerHelper('eachWithIndex', function(cursor, options) {
    var fn = options.fn, inverse = options.inverse;
    var ret = "";
    var idx = -1;
    //console.log(cursor);
    cursor.forEach(function(item){
        idx++;
        console.log(item.index);
        item.index = idx;
        ret+=fn(item);
    });
    return ret;
});

ハンドルバーテンプレート：

{{#eachWithIndex outer}}
  {{#each inner}}
   {{../index}} // access outer index like this. I used hanlebars V1.3.0
   {{index}} // access inner index
  {{/each}}
{{/eachWithIndex}}
1
Fish