Greifen Sie auf eine Variable außerhalb des Bereichs einer Handlebars.js jeder Schleife zu

187

Ich habe eine Vorlage für handlebars.js, genau wie folgt:

{{externalValue}}

<select name="test">
    {{#each myCollection}}
       <option value="{{id}}">{{title}} {{externalValue}}</option>
    {{/each}}
</select>

Und das ist die generierte Ausgabe:

myExternalValue

<select name="test">
       <option value="1">First element </option>
       <option value="2">Second element </option>
       <option value="3">Third element </option>
</select>

Wie erwartet kann ich auf die Felder idund titlejedes Elements von zugreifen myCollection, um meine Auswahl zu generieren. Außerhalb der Auswahl wird meine externalValueVariable korrekt gedruckt ("myExternalValue").

Leider wird in den Texten der Optionen der externalValueWert nie ausgedruckt.

Meine Frage ist: Wie kann ich innerhalb der Schleife auf eine Variable außerhalb des Bereichs der handlebars.js zugreifen?

javascript templates scope each handlebars.js Glück 84
quelle

Antworten:

453

Versuchen

<option value="{{id}}">{{title}} {{../externalValue}}</option>

Das ../Pfadsegment verweist auf den übergeordneten Vorlagenbereich, der Ihren Wünschen entsprechen sollte.

Spliter
quelle
10
Wenn zukünftige Leser immer noch Probleme haben wie ich, lesen Sie den Kommentar zu dieser Antwort hier. Nachdem ich diese Antwort gesehen hatte, brauchte ich eine Weile, um diese zu sehen. Möglicherweise müssen Sie ../wiederholt verwenden, je nachdem, wie viele Bereiche von dem Wert entfernt sind, den Sie haben.
bcmcfc
10
Bin ich verrückt oder sind diese wertvollen Informationen nirgends in den Lenkerdokumenten zu finden?
Jesse
1
@spliter wird dies auf Glut Lenker funktionieren .. es scheint nicht zu funktionieren
kweku360
1
Keine Ahnung @ kweku360. Dies funktioniert bei normalen Hadlebars. Könnte sein, dass Ember eine angepasste Version des Lenkers verwendet, bei der diese Funktionalität mit einem anderen Mittel implementiert wird
Spliter
1
Danke Mann, das funktioniert auch perfekt mit Foundation 6 Panini.
Marco
13

Oder Sie können einen absoluten Pfad wie folgt verwenden:

<option value="{{id}}">{{title}} {{@root.user.path.to.externalValue}}</option>
kidkkr
quelle
1

Ich habe viele Links zu 404 zur Dokumentation zu diesem Thema gesehen.

Ich aktualisiere es mit diesem, es funktioniert am 1. April 2020 :

https://handlebarsjs.com/guide/expressions.html#path-expressions

Einige Helfer wie #with und #each ermöglichen es Ihnen, in verschachtelte Objekte einzutauchen. Wenn Sie ../ Segmente in Ihren Pfad aufnehmen, wechseln die Lenker wieder in den übergeordneten Kontext.

    {{#each people}}
    {{../prefix}} {{firstname}} 
    {{/each}}

Obwohl der Name im Kontext eines Kommentars gedruckt wird, kann er dennoch zum Hauptkontext (dem Stammobjekt) zurückkehren, um das Präfix abzurufen.

WARNUNG

Der genaue Wert, in den ../ aufgelöst wird, hängt vom Helfer ab, der den Block aufruft. Die Verwendung von ../ ist nur erforderlich, wenn sich der Kontext ändert. Kinder von Helfern wie {{#each}} benötigen die Verwendung von ../, Kinder von Helfern wie {{#if}} nicht.

{{permalink}}
{{#each comments}}
  {{../permalink}}

  {{#if title}}
    {{../permalink}}
  {{/if}}
{{/each}}

In diesem Beispiel beziehen sich alle oben genannten auf denselben Präfixwert, obwohl sie sich in verschiedenen Blöcken befinden. Dieses Verhalten ist neu ab Lenker 4, die Release Notes das vorherige Verhalten sowie den Migrationsplan zu diskutieren.

titoih
quelle