Accéder aux propriétés du parent avec une boucle de guidon «chaque»

204

Considérez les données simplifiées suivantes:

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

Et un modèle de guidon:

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

Cela ne fonctionnera pas car dans la eachboucle, la portée parent n'est pas accessible - du moins pas de la manière que j'ai essayée. J'espère cependant qu'il existe un moyen de le faire!

Drew Noakes
la source

Réponses:

423

Il existe deux façons valides d'y parvenir.

Déréférencer la portée parent avec ../

En ajoutant ../le nom de la propriété au début , vous pouvez référencer la portée parent.

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

Vous pouvez monter plusieurs niveaux en répétant le ../. Par exemple, pour monter de deux niveaux, utilisez ../../key.

Pour plus d'informations, consultez la documentation des guidons sur les chemins .

Déréférencer la portée racine avec @root

En ajoutant @rootau chemin de la propriété, vous pouvez naviguer vers le bas à partir de la portée la plus élevée (comme indiqué dans la réponse de caballerog ).

Pour plus d'informations, consultez la documentation du guidon sur les variables @data .

Drew Noakes
la source
101
Juste une note sur l'utilisation de ../ pour obtenir les propriétés parentales. Si vous avez une instruction each avec un #if imbriqué, le simple fait de faire ../ ne vous amène qu'au niveau de #each. Vous devez donc faire ../../itemSize pour revenir au parent en dehors de #each
TheStoneFox
1
Comment puis-je obtenir cette fonctionnalité dans le moteur de modélisation moustache.js?
blushrt
2
@blushrt vous ne le faites pas. C'est spécifique au guidon
19h
3
@TheTaxPayer vous venez de me sauver une immense quantité de maux de tête! enfilez vos chaussettes :)
Peter P.
4
Qu'en est-il de passer une valeur supérieure de #each à un assistant
Oleg Belousov
60

La nouvelle méthode utilise la notation par points, la notation par barre oblique est déconseillée ( http://handlebarsjs.com/expressions.html ).

Ainsi, la méthode réelle pour accéder aux éléments parents est la suivante:

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

Dans votre exemple spécifique, vous utiliseriez:

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

Une autre méthode de la documentation officielle ( http://handlebarsjs.com/builtin_helpers.html ) utilise l'alias

Chaque assistant prend également en charge les paramètres de bloc, permettant des références nommées n'importe où dans le bloc.

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

Crée une clé et une variable de valeur auxquelles les enfants peuvent accéder sans avoir besoin de références de variable approfondies. Dans l'exemple ci-dessus, {{key}}> est identique à {{@ .. / key}} mais dans de nombreux cas est plus lisible.

caballerog
la source
1
Monter d'un niveau pour moi a fonctionné en utilisant "@ root.itemSize".
Sam Tyson