Accédez à une variable en dehors de la portée d'un Handlebars.js à chaque boucle

188

J'ai un modèle handlebars.js, comme ceci:

{{externalValue}}

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

Et voici la sortie générée:

myExternalValue

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

Comme prévu, je peux accéder aux champs idet titlede chaque élément de myCollectionpour générer ma sélection. Et en dehors de la sélection, ma externalValuevariable est correctement imprimée ("myExternalValue").

Malheureusement, dans les textes d'options, la externalValuevaleur n'est jamais imprimée.

Ma question est la suivante: comment puis-je accéder à une variable en dehors de la portée du handlebars.js chacun à partir de la boucle?

javascript templates scope each handlebars.js lucke84
la source

Réponses:

454

Essayer

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

Le ../segment de chemin fait référence à la portée du modèle parent qui doit être ce que vous voulez.

séparateur
la source
10
Si les futurs lecteurs ont encore des problèmes comme moi, jetez un œil au commentaire de cette réponse ici. Il m'a fallu un certain temps après avoir vu cette réponse pour voir celle-là. Vous devrez peut-être utiliser à ../plusieurs reprises en fonction du nombre de portées loin de la valeur que vous êtes.
bcmcfc
10
Suis-je fou ou est-ce que ce type d'informations précieuses est introuvable sur la documentation du guidon ???
Jesse
1
@spliter cela fonctionnera-t-il sur les guidons de braise .. cela ne semble pas fonctionner
kweku360
1
Aucune idée @ kweku360. Cela fonctionne pour les hadlebars normaux. Peut-être qu'Ember utilise une version personnalisée du guidon où cette fonctionnalité est implémentée avec un autre moyen
spliter
1
Merci mec, cela fonctionne parfaitement aussi avec Foundation 6 Panini.
Marco
13

Ou vous pouvez utiliser un chemin absolu comme celui-ci:

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

J'ai vu de nombreux liens avec 404 pour la documentation sur ce sujet.

Je le mets à jour avec celui-ci, il fonctionne le 1er avril 2020 :

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

Certains helpers comme #with et #each vous permettent de plonger dans des objets imbriqués. Lorsque vous incluez ../ segments dans votre chemin, Handlebars reviendra dans le contexte parent.

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

Même si le nom est imprimé dans le contexte d'un commentaire, il peut toujours revenir au contexte principal (l'objet racine) pour récupérer le préfixe.

AVERTISSEMENT

La valeur exacte à laquelle ../ se résoudra varie en fonction de l'assistant qui appelle le bloc. L'utilisation de ../ n'est nécessaire que lorsque le contexte change. Les enfants des aides tels que {{#each}} nécessiteraient l'utilisation de ../ alors que les enfants des aides tels que {{#if}} ne le font pas.

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

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

Dans cet exemple, tous les éléments ci-dessus font référence à la même valeur de préfixe même s'ils sont situés dans des blocs différents. Ce comportement est nouveau depuis Handlebars 4, les notes de publication traitent du comportement antérieur ainsi que du plan de migration.

titoih
la source