javascript - Tilgang til egenskaper til forelderen med en Handlebars 'each'-løkke

Vurder følgende forenklede data:

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

Og en Handlebars-mal:

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

Dette vil ikke fungere fordi innenfor each-løkka er ikke foreldreskopet tilgjengelig -- i det minste ikke på noen måte jeg har prøvd. Jeg håper imidlertid at det finnes en måte å gjøre dette på!

Svar #1

Det finnes to gyldige måter å oppnå dette på.

Dereferer foreldreskalaen med ../

Ved å sette ../ foran egenskapsnavnet, kan du referere til foreldresammenhengen.

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

Du kan gå opp flere nivåer ved å gjenta ../. For eksempel, for å gå opp to nivåer, bruk ../../key.

For mer informasjon, se Handlebars-dokumentasjonen om stier.

Dereferer rotomfanget med @root

Ved å legge @root foran egenskapsstien, kan du navigere nedover fra det øverste omfanget (som vist i caballerog's svar).

For mer informasjon, se Handlebars-dokumentasjonen om @data-variabler.

Svar #2

Den nye metoden bruker punktnotasjon, skråstreknotasjonen er foreldet (http://handlebarsjs.com/expressions.html).

Så, den faktiske metoden for å få tilgang til foreldrelementene er som følger:

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

I ditt spesifikke eksempel, ville du brukt:

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

En annen metode fra den offisielle dokumentasjonen (http://handlebarsjs.com/builtin_helpers.html) er å bruke alias

Hver hjelper støtter også blokkparametere, noe som gjør det mulig med navngitte referanser hvor som helst i blokken.

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

Vil lage en nøkkel- og verdi-variabel som barn kan få tilgang til uten behov for dypt strukturerte variabelreferanser. I eksemplet ovenfor er {{key}} > identisk med {{@../key}}, men i mange tilfeller er det mer lesbart.

Relaterte artikler