使用Handlebars'each'循环访问父级的属性

Question

考虑以下简化数据：

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

一个Handlebars模板：

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

这不起作用，因为在each循环中，父作用域不可访问 - 至少不是我尝试过的任何方式。我希望有一种方法可以做到这一点！

Answer 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 documentation on paths。

使用@root

取消引用根范围

通过将@root添加到属性路径，您可以从最顶层的范围向下导航（如caballerog's answer所示）。

有关详细信息，请参阅Handlebars documentation on @data variables。

Answer 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}} 

     

将创建一个儿童可以访问的键和值变量   需要depthed变量引用。在上面的示例中，{{key}}＆gt;与{{@ .. / key}}相同，但在许多情况下更具可读性。

Answer 3

不幸的是../取消引用似乎无法通过局部函数进行。但是我们可以将属性添加到传递给partial的上下文中：

1.6| 202006| item1| Food

childpartial：

Name: {{parent.name}}

{{#each children}}
    {{> childpartial this parent=../parent}}
{{/each}}

更多： handlebars - is it possible to access parent context in a partial?

Answer 4

我们可以使用 {{../parent.propertyname}} 访问父级