使用Handlebars的“each”循环访问父项的属性

考虑下面的简化数据：

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

和一个把手模板：

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

这是行不通的，因为在each循环中，父范围是不可访问的 – 至less不是我试过的任何方式。 我希望有一个这样做的方式！

Answer 1

事实certificate，通过将../添加到属性名称是可能的：

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

有关更多信息，请参阅path上的Handlebars文档 。

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

将创build一个键和值variables，孩子可以访问，而不需要清空variables引用。 在上面的例子中，{{key}}>与{{@ .. / key}}完全相同，但在很多情况下，它更具可读性。