222

次の簡略化されたデータを検討してください。

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

そしてHandlebarsテンプレート：

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

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

4

4 に答える 4

459

これを実現するには、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 変数に関するハンドルバーのドキュメントを参照してください。

于 2012-09-06T10:26:11.433 に答える
69

新しいメソッドはドット表記を使用しており、スラッシュ表記は非推奨です ( 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 ヘルパーはブロック パラメーターもサポートしているため、ブロック内の任意の場所で名前付き参照を使用できます。

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

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

于 2016-04-19T17:29:37.413 に答える