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

203

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!

Drew Noakes
quelle

Antworten:

422

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 .

Drew Noakes
quelle
100
Nur ein Hinweis zur Verwendung von ../, um übergeordnete Eigenschaften abzurufen. Wenn Sie jede Anweisung mit einem verschachtelten #if haben, gelangen Sie mit nur ../ nur auf die Ebene von #each. Sie müssen also ../../itemSize ausführen, um zu den Eltern außerhalb von #each
TheStoneFox zurückzukehren.
1
Wie kann ich diese Funktionalität in der Template-Engine von mustache.j erhalten?
blushrt
2
@blushrt du nicht. Das ist Lenker spezifisch
19h
3
@TheTaxPayer du hast mir gerade eine Menge Kopfschmerzen erspart! Rock on mit deinen Socken an :)
Peter P.
4
Was ist mit der Übergabe eines #each-Werts der oberen Ebene an einen Helfer
Oleg Belousov
60

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.

caballerog
quelle
1
Für mich ging es mit "@ root.itemSize" eine Ebene höher.
Sam Tyson