Akses properti induk dengan loop 'setiap' Setang

Pertimbangkan data sederhana berikut ini:

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

Dan template Gagang:

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

Ini tidak akan berfungsi karena dalam eachloop, cakupan induk tidak dapat diakses - setidaknya tidak dengan cara apa pun yang saya coba. Saya berharap ada cara untuk melakukan ini!

Ada dua cara yang valid untuk mencapai ini.

Dereferensi lingkup induk dengan ../

Dengan mendahului ../nama properti, Anda dapat referensi lingkup induk.

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

Anda dapat naik beberapa level melalui pengulangan ../. Misalnya, untuk naik dua level gunakan ../../key.

Untuk informasi lebih lanjut, lihat dokumentasi Setang di jalur .

Dereference lingkup root dengan @root

Dengan mengawali @rootke path properti, Anda dapat menavigasi ke bawah dari ruang lingkup paling atas (seperti yang ditunjukkan dalam jawaban caballerog ).

Untuk informasi lebih lanjut, lihat dokumentasi Setang tentang variabel data .

Metode baru menggunakan notasi titik, notasi garis miring tidak digunakan lagi ( http://handlebarsjs.com/expressions.html ).

Jadi, metode aktual untuk mengakses elemen orang tua adalah sebagai berikut:

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

Dalam contoh spesifik Anda, Anda akan menggunakan:

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

Metode lain dari dokumentasi resmi ( http://handlebarsjs.com/builtin_helpers.html ) menggunakan alias

Setiap helper juga mendukung parameter blok, memungkinkan untuk referensi yang disebutkan di mana saja di blok.

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

Akan membuat variabel kunci dan nilai yang dapat diakses anak-anak tanpa perlu referensi variabel yang mendalam. Pada contoh di atas, {{key}}> identik dengan {{@ .. / key}} tetapi dalam banyak kasus lebih mudah dibaca.