Dostęp do właściwości rodzica za pomocą pętli „każda” kierownicy

Rozważ następujące uproszczone dane:

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

I szablon kierownicy:

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

To nie zadziała, ponieważ w eachpętli zakres nadrzędny nie jest dostępny - przynajmniej w żaden sposób, który próbowałem. Mam jednak nadzieję, że jest na to sposób!

Istnieją dwa ważne sposoby osiągnięcia tego celu.

Dereferencjuj zakres nadrzędny za pomocą ../

Przechodząc ../do nazwy właściwości, możesz odwoływać się do zakresu nadrzędnego.

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

Możesz przejść wiele poziomów, powtarzając ../. Na przykład, aby przejść o dwa poziomy, użyj ../../key.

Aby uzyskać więcej informacji, zobacz dokumentację Kierownicę na ścieżkach .

Wyklucz zakres główny za pomocą @root

Przechodząc @rootdo ścieżki właściwości, możesz nawigować w dół od najwyższego zakresu (jak pokazano w odpowiedzi caballeroga ).

Aby uzyskać więcej informacji, zobacz dokumentację Kierownicy na temat zmiennych @data .

Nowa metoda używa notacji kropkowej, notacja ukośnika jest przestarzała ( http://handlebarsjs.com/expressions.html ).

Tak więc faktyczna metoda dostępu do elementów nadrzędnych jest następująca:

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

W twoim konkretnym przykładzie użyłbyś:

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

Inną metodą z oficjalnej dokumentacji ( http://handlebarsjs.com/builtin_helpers.html ) jest użycie aliasu

Każdy pomocnik obsługuje również parametry bloku, pozwalając na nazwane odwołania w dowolnym miejscu w bloku.

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

Utworzy zmienną kluczową i wartościową, do której dzieci mogą uzyskać dostęp bez potrzeby odwoływania się do zmiennych. W powyższym przykładzie {{klucz}}> jest identyczny z {{@ .. / key}}, ale w wielu przypadkach jest bardziej czytelny.