web-dev-qa-db-ja.com

Handlebarsの「各」ループを使用して親のプロパティにアクセスする

次の単純化されたデータを考慮してください。

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

そして、Handlebarsテンプレート：

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

eachループ内では、親スコープにアクセスできないため、これは機能しません。少なくとも、私が試した方法はありません。しかし、これを行う方法があることを願っています！

javascripthandlebars.js
176
Drew Noakes

これを実現するには、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を使用します。

詳細については、 パスに関するハンドルのドキュメント を参照してください。

@rootを使用してルートスコープを逆参照します

プロパティパスの先頭に@rootを追加すると、最上部のスコープから下に移動できます（ caballerogの答え に示すように）。

詳細については、 @ data変数に関するハンドルバーのドキュメント を参照してください。

376
Drew Noakes

新しいメソッドはドット表記を使用しています。スラッシュ表記は非推奨です（ http://handlebarsjs.com/expressions.html ）。

したがって、親要素にアクセスする実際の方法は次のとおりです。

@root.grandfather.father.element
@root.father.element

具体的な例では、次を使用します。

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

公式ドキュメント（ http://handlebarsjs.com/builtin_helpers.html ）からの別の方法はエイリアスを使用しています

各ヘルパーはブロックパラメーターもサポートしているため、ブロック内の任意の場所で名前付き参照を使用できます。

{{#each array as |value key|}}  
 {{#each child as |childValue childKey|}}
     {{key}} - {{childKey}}. {{childValue}}   
 {{/each}} 
{{/each}}

深層の変数参照を必要とせずに子供がアクセスできるキーと値の変数を作成します。上記の例では、{{key}}>は{{@ ../key}}と同じですが、多くの場合、読みやすくなっています。

46
caballerog