Acceda a las propiedades del padre con un bucle de 'cada' manillar

Considere los siguientes datos simplificados:

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

Y una plantilla de manillares:

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

Esto no funcionará porque, dentro del eachbucle, el alcance principal no es accesible, al menos de ninguna manera que lo haya intentado. Sin embargo, ¡espero que haya una manera de hacerlo!

Hay dos formas válidas de lograr esto.

Desreferenciar el alcance principal con ../

Al anteponer ../el nombre de la propiedad, puede hacer referencia al ámbito principal.

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

Puede subir varios niveles repitiendo el ../. Por ejemplo, para subir dos niveles use ../../key.

Para obtener más información, consulte la documentación de Manillares en las rutas .

Desreferenciar el alcance raíz con @root

Al anteponerse @roota la ruta de la propiedad, puede navegar hacia abajo desde el alcance superior (como se muestra en la respuesta de caballerog ).

Para obtener más información, consulte la documentación de Manillares sobre variables @data .

El nuevo método utiliza la notación de puntos, la notación de barra está en desuso ( http://handlebarsjs.com/expressions.html ).

Entonces, el método real para acceder a los elementos padres son los siguientes:

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

En su ejemplo específico, usaría:

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

Otro método de la documentación oficial ( http://handlebarsjs.com/builtin_helpers.html ) es usar alias

Cada ayudante también admite parámetros de bloque, lo que permite referencias con nombre en cualquier parte del bloque.

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

Creará una variable clave y de valor a la que los niños pueden acceder sin la necesidad de referencias de variables profundas. En el ejemplo anterior, {{key}}> es idéntico a {{@ .. / key}} pero en muchos casos es más legible.