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

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!

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 .

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.