Доступ к свойствам родителя с помощью цикла «каждый» Handlebars

204

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

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

И шаблон руля:

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

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

Дрю Ноакс
источник

Ответы:

423

Есть два способа добиться этого.

Разыменуйте родительскую область с помощью ../

При добавлении ../к имени свойства вы можете ссылаться на родительскую область.

{{#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 о путях .

Разыменуйте корневую область с помощью @root

Приступая @rootк пути к свойству, вы можете перемещаться вниз от самой верхней области (как показано в ответе caballerog ).

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

Дрю Ноакс
источник
101
Просто заметка об использовании ../ для получения родительских свойств. Если у вас есть каждое утверждение с вложенным #if, то просто выполнение ../ приведет вас только к уровню #each. Так что вам нужно сделать ../../itemSize, чтобы вернуться к родителю за пределами #each
TheStoneFox
1
Как я могу получить эту функциональность в движке шаблонов mustache.js?
blushrt
2
@blushrt Вы не делаете. Это специфический руль
19
3
@TheTaxPayer вы только что спасли меня от головной боли! качайся с носками :)
Питер П.
4
Как насчет передачи значения #each верхнего уровня помощнику
Олег Белоусов
60

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

caballerog
источник
1
Поднятие на один уровень для меня работало с использованием "@ root.itemSize".
Сэм Тайсон