使用 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 助手还支持块参数，允许命名 引用块中的任何位置。

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

将创建一个孩子可以在没有的情况下访问的键和值变量 需要深入的变量引用。在上面的示例中，{{key}} > 与 {{@../key}} 相同，但在许多情况下更具可读性。

Answer 3

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

Name: {{parent.name}}

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

子部分：

{{name}} is child of {{parent.name}}

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

Answer 4

我们可以使用 {{../parent.propertyname}}

访问父级