Accedi alle proprietà del genitore con un ciclo 'ogni' per il manubrio


204

Considera i seguenti dati semplificati:

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

E un modello di manubrio:

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

Questo non funzionerà perché all'interno del eachciclo, l'ambito padre non è accessibile - almeno non in alcun modo che ho provato. Spero che ci sia un modo per farlo!

Risposte:


423

Esistono due modi validi per raggiungere questo obiettivo.

Dereference the scope scope with ../

Anticipando ../il nome della proprietà, è possibile fare riferimento all'ambito padre.

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

Puoi salire di più livelli ripetendo il ../. Ad esempio, per salire di due livelli utilizzare ../../key.

Per ulteriori informazioni, consultare la documentazione del manubrio sui percorsi .

Dereference the root scope with @root

Anticipando @rootil percorso della proprietà, è possibile spostarsi verso il basso dall'ambito più in alto (come mostrato nella risposta di caballerog ).

Per ulteriori informazioni, consultare la documentazione del manubrio sulle variabili @data .


101
Solo una nota sull'uso di ../ per ottenere le proprietà del genitore. Se hai un'istruzione ogni con un #if nidificato, allora basta fare ../ ti porta solo al livello di #each. Quindi devi fare ../../itemSize per tornare dal genitore al di fuori del #each
TheStoneFox

1
Come posso ottenere questa funzionalità nel motore di template mustache.js?
Arrossisce il

2
@blushrt no. È specifico per il manubrio
19h,

3
@TheTaxPayer mi hai appena salvato un'enorme quantità di mal di testa! vai avanti con le calze :)
Peter P.

4
Che ne dici di passare un valore #each di livello superiore in un aiutante
Oleg Belousov il

60

Il nuovo metodo utilizza la notazione punto, la notazione barra è obsoleta ( http://handlebarsjs.com/expressions.html ).

Quindi, il metodo effettivo per accedere agli elementi dei genitori è il seguente:

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

Nel tuo esempio specifico, useresti:

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

Un altro metodo dalla documentazione ufficiale ( http://handlebarsjs.com/builtin_helpers.html ) sta usando l'alias

Ogni helper supporta anche i parametri di blocco, consentendo riferimenti nominati in qualsiasi punto del blocco.

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

Creerà una chiave e una variabile di valore a cui i bambini possono accedere senza la necessità di riferimenti variabili approfonditi. Nell'esempio sopra, {{key}}> è identico a {{@ .. / key}} ma in molti casi è più leggibile.


1
Salire di un livello per me ha funzionato usando "@ root.itemSize".
Sam Tyson,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.