Доступ к свойствам родителя с помощью цикла Handlebars 'each

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

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

и руль шаблон:

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

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

2 164
javascript handlebars.js

2 ответа:

получается, что это возможно путем добавления ../ к имени свойства:

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

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

353

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

37