[解決済み】Handlebarsの'each'ループで親のプロパティにアクセスする

質問

次のような簡略化されたデータを考えてみましょう。

var viewData = {
    itemSize: 20,
    items: [
        'Zimbabwe', 'dog', 'falafel'
    ]
};

そして、Handlebarsのテンプレート。

{{#each items}}
    <div style="font-size:{{itemSize}}px">{{this}}</div>
{{/each}}

これはうまくいきません。 each のループでは、親スコープにアクセスできません。少なくとも私が試した限りでは、そうでした。でも、これを実現する方法があればいいなと思います。

解決方法は？

そのためには、2つの有効な方法があります。

親スコープを参照するには ../

の前につけることで ../ をプロパティ名に追加すると、親スコープを参照できるようになります。

{{#each items}}
    <div style="font-size:{{../itemSize}}px">{{this}}</div>
    {{#if this.items.someKey}}
       <div style="font-size:{{../../itemSize}}px">{{this}}</div>  
    {{/if}}
{{/each}}

を繰り返すことで、何段階も上に行くことができます。 ../ . 例えば、2つ上の階層に行くには ../../key .

詳しくは パスに関するHandlebarsのドキュメント .

ルートスコープの参照は @root

の前につけることで @root をプロパティパスに追加すると、最上位のスコープから下へ移動することができます (次のようになります)。 caballerogさんの回答 ).

詳しくは Handlebars documentation on @data variables .