web-dev-qa-db-fra.com

Accéder aux propriétés du parent avec une boucle 'each' du guidon

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 boucle each, la portée parente n'est pas accessible - du moins, d'aucune façon que j'ai essayée. J'espère qu'il y a un moyen de faire ça!

javascripthandlebars.js
179
Drew Noakes

Il existe deux manières valables d'y parvenir.

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

En ajoutant ../ au nom de la propriété, 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, voir le documentation du guidon sur les chemins .

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

En ajoutant le préfixe @root au chemin de la propriété, vous pouvez naviguer de haut en bas (comme indiqué dans réponse de caballerog ).

Pour plus d'informations, voir Documentation du guidon sur les variables @data .

383
Drew Noakes

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

Ainsi, la méthode d'accès 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 un 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.

47
caballerog