Свойства доступа родителя с петлей Handlebars 'each'

Рассмотрим следующие упрощенные данные:

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

И шаблон Handlebars:

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

Это не сработает, потому что в цикле each родительская область недоступна - по крайней мере, не так, как я пытался. Я надеюсь, что есть способ сделать это, хотя!

Ответы

Ответ 1

Оказывается, это возможно, добавив ../ к имени свойства:

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

Вы можете перейти на несколько уровней, повторив ../. Например, для перехода на два уровня используйте ../../key.

Для получения дополнительной информации см. документацию Handlebars на пути.

Ответ 2

Новый метод использует точечную нотацию, нотация слэра устарела (http://handlebarsjs.com/expressions.html).

Таким образом, фактический метод доступа к элементам родителей следующий:

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

В вашем конкретном примере вы должны использовать:

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

Другой метод из официальной документации (http://handlebarsjs.com/builtin_helpers.html) использует псевдоним

Каждый помощник также поддерживает параметры блока, ссылки в любом месте блока.

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

Создает переменную ключа и значения, к которой могут обращаться дети без необходимость в ссылках на отклонения переменных. В приведенном выше примере {{key}} > идентичен {{@../key}}, но во многих случаях более читаем.