Доступ до властивостей батьків із циклом "кожного" рукоятки

Розглянемо такі спрощені дані:

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

І шаблон рулі:

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

Це не спрацює, тому що в eachциклі батьківська область не доступна - принаймні, не так, як я намагався. Я сподіваюся, що є спосіб зробити це, хоча!

Є два дійсних способи досягти цього.

Дереференція батьківської області з ../

Заздалегідь додавши ../до імені властивості, ви можете посилатися на батьківський діапазон.

{{#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.

Для отримання додаткової інформації дивіться документацію щодо рульових коліс про шляхи .

Відмежування кореневої області за допомогою @root

Заздалегідь додавшись @rootдо шляху властивості, ви можете переміщатися вниз від верхнього діапазону (як це показано у відповіді кабалерога ).

Для отримання додаткової інформації дивіться документацію на рулі на змінних @data .

Новий метод використовує позначення крапок, позначення косої риси застаріло ( 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}}, але у багатьох випадках є більш читабельним.