Greifen Sie mit einer Lenker-Schleife 'each' auf die Eigenschaften des übergeordneten Elements zu

Betrachten Sie die folgenden vereinfachten Daten:

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

Und eine Lenkervorlage:

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

Dies funktioniert nicht, da innerhalb der eachSchleife nicht auf den übergeordneten Bereich zugegriffen werden kann - zumindest nicht in einer Weise, die ich versucht habe. Ich hoffe, dass es einen Weg gibt, dies zu tun!

Es gibt zwei gültige Wege, um dies zu erreichen.

Dereferenzieren Sie den übergeordneten Bereich mit ../

Durch Voranstellen ../des Eigenschaftsnamens können Sie auf den übergeordneten Bereich verweisen.

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

Sie können mehrere Stufen hochgehen, indem Sie das wiederholen ../. Zum Beispiel, um zwei Ebenen zu erhöhen, verwenden Sie ../../key.

Weitere Informationen finden Sie in der Dokumentation zum Lenker zu Pfaden .

Dereferenzieren Sie den Stammbereich mit @root

Wenn Sie @rootdem Eigenschaftspfad voranstellen , können Sie vom obersten Bereich nach unten navigieren (wie in der Antwort von caballerog gezeigt ).

Weitere Informationen finden Sie in der Lenkerdokumentation zu @ data-Variablen .

Die neue Methode verwendet die Punktnotation, die Schrägstrichnotation ist veraltet ( http://handlebarsjs.com/expressions.html ).

Die eigentliche Methode für den Zugriff auf die übergeordneten Elemente ist also die folgende:

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

In Ihrem speziellen Beispiel würden Sie Folgendes verwenden:

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

Eine andere Methode aus der offiziellen Dokumentation ( http://handlebarsjs.com/builtin_helpers.html ) ist die Verwendung von Alias

Jeder Helfer unterstützt auch Blockparameter und ermöglicht benannte Referenzen an einer beliebigen Stelle im Block.

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

Erstellt eine Schlüssel- und Wertvariable, auf die Kinder zugreifen können, ohne dass detaillierte Variablenreferenzen erforderlich sind. Im obigen Beispiel ist {{key}}> identisch mit {{@ .. / key}}, aber in vielen Fällen besser lesbar.