Handlebars #each循环内子表达式传递this不生效如何解决

问题根因 #

{{#each}} 遍历块会切换当前作用域：块内的this指向categories数组的当前遍历项，此时直接调用product.category无法访问到上层作用域的product对象，同时给this套括号的写法也不符合Handlebars语法规则。

解决方案1：使用作用域路径符../访问上层变量 #

不需要修改你已定义的optionSelected helper，只需调整模板代码如下即可：

{{#each categories}}
  <option value="{{this}}" {{optionSelected ../product.category this}}>{{this}}</option>
{{/each}}

../表示回退到上一级作用域，即可正常获取到product对象的属性。

解决方案2：使用each的命名参数语法（可读性更高） #

你也可以给遍历的当前项显式指定变量名，完全避免作用域混淆问题：

{{#each categories as |category|}}
  <option value="{{category}}" {{optionSelected product.category category}}>{{category}}</option>
{{/each}}

这种写法不需要处理作用域回退，逻辑更直观，后续维护也更方便。

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