Akses properti induk dengan loop 'setiap' Setang

204

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!

Drew Noakes
sumber

Jawaban:

423

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 .

Drew Noakes
sumber
101
Hanya catatan tentang menggunakan ../ untuk mendapatkan properti induk. Jika Anda memiliki masing-masing pernyataan dengan # jika bersarang maka lakukan ../ hanya akan membawa Anda ke tingkat # masing-masing. Jadi, Anda harus melakukan ../../itemSize untuk kembali ke induk di luar #each
TheStoneFox
1
Bagaimana saya bisa mendapatkan fungsionalitas ini di templating engine mustache.js?
blushrt
2
@blushrt kamu tidak. Itu khusus setang
19h
3
@TheTaxPayer Anda baru saja menyelamatkan saya dari sakit kepala yang luar biasa! goyang dengan kaus kakimu :)
Peter P.
4
Bagaimana dengan meneruskan nilai level #each tingkat atas menjadi penolong
Oleg Belousov
60

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.

caballerog
sumber
1
Naik satu tingkat untuk saya bekerja menggunakan "@ root.itemSize".
Sam Tyson