如何在Handlebars模板中通过循环键值访问外部变量？

这个问题我之前也碰到过，Handlebars在处理动态键路径的时候确实有个小坑——你直接写../a.[@key].name是没法被正确解析的，因为它不能识别把[@key]作为动态键去访问上层的a对象。下面给你两种可行的解决办法：

方法一：用with助手绑定上层对象到局部变量 #

我们可以先把上层的a对象通过with助手绑定到一个局部变量，这样在each循环里就能直接用这个变量结合@key来访问对应属性了：

<div class="left-panel">
  {{a.x.name}} <!-- 正常输出"xavier" -->
  {{#with ../a as |parentA|}}
    {{#each b.properties}}
      <h4>{{@key}}</h4> <!-- 输出"x" -->
      <h4>{{parentA.[@key].name}}</h4> <!-- 现在可以正确输出"xavier" -->
    {{/each}}
  {{/with}}
</div>

方法二：用内置的lookup助手 #

Handlebars提供了内置的lookup助手，专门用来动态查找对象的属性。我们可以先用它根据@key找到a对象中对应的属性，再访问其name字段：

<div class="left-panel">
  {{a.x.name}} <!-- 正常输出"xavier" -->
  {{#each b.properties}}
    <h4>{{@key}}</h4> <!-- 输出"x" -->
    <h4>{{ (lookup ../a @key).name }}</h4> <!-- 正确输出"xavier" -->
  {{/each}}
</div>

注意：部分Handlebars版本需要用括号包裹lookup表达式，确保先执行属性查找，再访问name属性。

如果后续b.properties里新增了其他键（比如y），这两种方法都能自动匹配到a中对应对象的name属性，比如输出yamal。

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