Javascript 使用 Handlebars 'each' 循环访问父级的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12297959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Access properties of the parent with a Handlebars 'each' loop
提问by Drew Noakes
Consider the following simplified data:
考虑以下简化数据：
var viewData = {
itemSize: 20,
items: [
'Zimbabwe', 'dog', 'falafel'
]
};
And a Handlebars template:
还有一个 Handlebars 模板：
{{#each items}}
<div style="font-size:{{itemSize}}px">{{this}}</div>
{{/each}}
This won't work because within the eachloop, the parent scope is not accessible -- at least not in any way that I've tried. I'm hoping that there's a way of doing this though!
这将不起作用，因为在each循环内，父作用域不可访问——至少我尝试过的任何方式都无法访问。我希望有一种方法可以做到这一点！
回答by Drew Noakes
There are two valid ways to achieve this.
有两种有效的方法可以实现这一点。
Dereference the parent scope with ../
取消引用父作用域 ../
By prepending ../to the property name, you can reference the parent scope.
通过../在属性名称之前添加，您可以引用父作用域。
{{#each items}}
<div style="font-size:{{../itemSize}}px">{{this}}</div>
{{#if this.items.someKey}}
<div style="font-size:{{../../itemSize}}px">{{this}}</div>
{{/if}}
{{/each}}
You can go up multiple levels via repeating the ../. For example, to go up two levels use ../../key.
您可以通过重复../. 例如，要上升两个级别，请使用../../key.
For more information, see the Handlebars documentation on paths.
有关更多信息，请参阅有关路径的Handlebars 文档。
Dereference the root scope with @root
取消引用根范围 @root
By prepending @rootto the property path, you can navigate downwards from the topmost scope (as shown in caballerog's answer).
通过添加@root到属性路径，您可以从最顶部的范围向下导航（如caballerog 的回答所示）。
For more information, see the Handlebars documentation on @data variables.
有关更多信息，请参阅有关 @data 变量的Handlebars 文档。
回答by caballerog
The new method is using dot notation, the slash notation is deprecated (http://handlebarsjs.com/expressions.html).
新方法使用点表示法，不推荐使用斜线表示法（http://handlebarsjs.com/expressions.html）。
So, the actual method to access to the parents elements are the following:
因此，访问父元素的实际方法如下：
@root.grandfather.father.element
@root.father.element
In your specific example, you would use:
在您的具体示例中，您将使用：
{{#each items}}
<div style="font-size:{{@root.viewData.itemSize}}px">{{this}}</div>
{{/each}}
Another method from the official documentation(http://handlebarsjs.com/builtin_helpers.html) is using alias
官方文档（http://handlebarsjs.com/builtin_helpers.html）中的另一种方法是使用别名
The each helper also supports block parameters, allowing for named references anywhere in the block.
{{#each array as |value key|}} {{#each child as |childValue childKey|}} {{key}} - {{childKey}}. {{childValue}} {{/each}} {{/each}}Will create a key and value variable that children may access without the need for depthed variable references. In the example above, {{key}} > is identical to {{@../key}} but in many cases is more readable.
each 助手还支持块参数，允许在块中的任何位置命名引用。
{{#each array as |value key|}} {{#each child as |childValue childKey|}} {{key}} - {{childKey}}. {{childValue}} {{/each}} {{/each}}将创建一个键和值变量，孩子们可以访问而无需深入的变量引用。在上面的示例中，{{key}} > 与 {{@../key}} 相同，但在许多情况下更具可读性。
