Dostęp do zmiennej poza zakresem Handlebars.js każdej pętli


188

Mam szablon handlebars.js, taki jak ten:

{{externalValue}}

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

A to jest wygenerowany wynik:

myExternalValue

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

Zgodnie z oczekiwaniami, mogę uzyskać dostęp do pól idi titlekażdego elementu, myCollectionaby wygenerować mój wybór. Poza zaznaczeniem moja externalValuezmienna jest poprawnie drukowana („myExternalValue”).

Niestety w tekstach opcji externalValuewartość nigdy nie jest drukowana.

Moje pytanie brzmi: w jaki sposób mogę uzyskać dostęp do zmiennej poza zakresem pliku handlebars.js z pętli?

Odpowiedzi:


454

Próbować

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

../Segment ścieżka odwołuje się do nadrzędnego szablonu zakres, który powinien być, co chcesz.


10
Jeśli przyszli czytelnicy nadal mają problemy, tak jak ja, spójrz na komentarz do tej odpowiedzi tutaj. Zajęło mi trochę czasu po zobaczeniu tej odpowiedzi, aby ją zobaczyć. Może być konieczne ../wielokrotne używanie w zależności od liczby zakresów oddalonych od wartości.
bcmcfc

10
Czy jestem szalony, czy tego rodzaju cennych informacji nie ma nigdzie w dokumentach kierownicy?
Jesse

1
@spliter będzie działał na kierownicach żarowych .. wydaje się, że nie działa
kweku360,

1
Nie mam pojęcia @ kweku360. Działa to dla normalnych hadlebarów. Możliwe, że Ember używa niestandardowej wersji kierownicy, w której ta funkcjonalność jest realizowana w inny sposób
spliter

1
Dziękuję człowieku, działa to doskonale również z Foundation 6 Panini.
Marco

13

Lub możesz użyć ścieżki bezwzględnej w następujący sposób:

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

1

Widziałem wiele linków do 404 do dokumentacji na ten temat.

Aktualizuję go za pomocą tego, działa od 1 kwietnia 2020 r . :

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

Niektóre pomocniki, takie jak #with i #each, pozwalają nurkować w zagnieżdżonych obiektach. Po włączeniu do ścieżki segmentów ../ kierownica zmieni się ponownie w kontekst nadrzędny.

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

Mimo że nazwa jest drukowana w kontekście komentarza, nadal może wrócić do głównego kontekstu (obiektu głównego), aby pobrać prefiks.

OSTRZEŻENIE

Dokładna wartość, którą ../ będzie zmieniała, różni się w zależności od pomocnika, który wywołuje blok. Użycie ../ jest konieczne tylko w przypadku zmiany kontekstu. Dzieci pomocników takich jak {{#each}} wymagałyby użycia ../, podczas gdy dzieci pomocników takich jak {{# #}} ​​nie.

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

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

W tym przykładzie wszystkie powyższe odnoszą się do tej samej wartości prefiksu, mimo że znajdują się w różnych blokach. To zachowanie jest nowe od Handlebars 4, informacje o wydaniu omawiają wcześniejsze zachowanie, a także plan migracji.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.