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

204

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!

Drew Noakes
fuente

Respuestas:

423

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 .

Drew Noakes
fuente
101
Solo una nota sobre el uso de ../ para obtener propiedades principales. Si tiene cada una de las declaraciones con un #if anidado, simplemente haciendo ../ solo lo llevará al nivel de #each. Por lo tanto, debe hacer ../../itemSize para volver al padre fuera de #each
TheStoneFox
1
¿Cómo puedo obtener esta funcionalidad en el motor de plantillas mustache.js?
blushrt 01 de
2
@blushrt no lo haces. Eso es específico del manillar
19h
3
@TheTaxPayer, ¡acabas de salvarme de una inmensa cantidad de dolor de cabeza! rockea con los calcetines puestos :)
Peter P.
44
¿Qué hay de pasar un valor de nivel superior # cada uno en un ayudante?
Oleg Belousov
60

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.

caballerog
fuente
1
Subir un nivel para mí funcionó usando "@ root.itemSize".
Sam Tyson