Handlebars中each遍历嵌套属性时如何正确访问父级属性

问题原因 #

Handlebars 的 ../ 语法回退的是模板作用域层级，而非数据结构的层级。你调整数据结构后直接遍历fruit.items时，#each块的上一级模板作用域是最外层的根数据对象，根对象下只有fruit属性，没有直接挂载currency字段，因此../currency会返回undefined。

可行解决方案 #

方案1：补全相对路径的属性层级 #

../ 已经指向根数据对象，直接访问根对象下fruit属性的currency即可，模板代码修改为：

{{#each fruit.items}}
  <p>{{name}} - {{quantity}} {{../fruit.currency}}</p>
{{/each}}

方案2：先切换到fruit作用域再遍历 #

使用#with指令先把当前作用域切入到fruit对象，再遍历子级items，此时#each的上一级作用域就是fruit对象，原有../currency的写法可以直接生效：

{{#with fruit}}
  {{#each items}}
    <p>{{name}} - {{quantity}} {{../currency}}</p>
  {{/each}}
{{/with}}

如果后续遇到更深层级的作用域嵌套，按照实际作用域层级补全对应数量的../即可正确访问上层属性。 #

内容的提问来源于stack exchange，提问作者Geraint Anderson