ハンドルバーの「各」ループで親のプロパティにアクセスする

次の簡略化されたデータを考えてみます。

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

そして、ハンドルバーテンプレート：

{{#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。

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

ルートスコープを逆参照する @root

@rootプロパティパスの先頭に追加することで、最上位のスコープから下に移動できます（caballerogの回答に示されています）。

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

新しいメソッドはドット表記を使用しており、スラッシュ表記は非推奨です（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}}と同じですが、多くの場合、読みやすくなっています。