每个循环访问 Handlebars.js 范围之外的变量答案

【问题标题】：Access a variable outside the scope of a Handlebars.js each loop每个循环访问 Handlebars.js 范围之外的变量
【发布时间】：2012-11-18 15:58:56
【问题描述】：

我有一个handlebars.js 模板，就像这样：

{{externalValue}}

<select name="test">
    {{#each myCollection}}
       <option value="{{id}}">{{title}} {{externalValue}}</option>
    {{/each}}
</select>

这是生成的输出：

myExternalValue

<select name="test">
       <option value="1">First element </option>
       <option value="2">Second element </option>
       <option value="3">Third element </option>
</select>

正如预期的那样，我可以访问myCollection 的每个元素的id 和title 字段来生成我的选择。在选择之外，我的 externalValue 变量被正确打印（“myExternalValue”）。

不幸的是，在选项的文本中，externalValue 值永远不会打印出来。

我的问题是：如何从循环内访问 handlebars.js 范围之外的变量？

【问题讨论】：

标签： javascript templates scope each handlebars.js

【解决方案1】：

试试

<option value="{{id}}">{{title}} {{../externalValue}}</option>

../ 路径段引用了应该是您想要的父模板范围。

【讨论】：

如果未来的读者仍然像我一样遇到问题，请在此处查看this answer 的评论。看到这个答案后，我花了一段时间才看到那个答案。您可能需要重复使用../，具体取决于距离您的值有多少范围。
我是疯了还是在车把文档上找不到这种有价值的信息？？？
@spliter 是否可以在 ember 车把上工作.. 它似乎不起作用
不知道@kweku360。这适用于普通的车把。可能是 Ember 正在使用自定义版本的车把，其中此功能是通过另一种方式实现的
谢谢你，这也适用于 Foundation 6 Panini。

【解决方案2】：

或者你可以像这样使用绝对路径：

<option value="{{id}}">{{title}} {{@root.user.path.to.externalValue}}</option>

【讨论】：

【解决方案3】：

我看到了许多与 404 相关的链接，以获取有关此主题的文档。

我用这个更新它，它在 2020 年 4 月 1 日工作：

https://handlebarsjs.com/guide/expressions.html#path-expressions

像#with 和#each 这样的一些助手可以让你深入到嵌套对象中。当您在路径中包含 ../ 段时，Handlebars 将变回父上下文。

    {{#each people}}
    {{../prefix}} {{firstname}} 
    {{/each}}

即使在注释上下文中打印名称，它仍然可以返回主上下文（根对象）以检索前缀。

警告

../ 将解析为的确切值因调用该块的助手而异。仅在上下文发生变化时才需要使用 ../。像 {{#each}} 这样的助手的孩子需要使用 ../ 而像 {{#if}} 这样的助手的孩子不需要。

{{permalink}}
{{#each comments}}
  {{../permalink}}

  {{#if title}}
    {{../permalink}}
  {{/if}}
{{/each}}

在此示例中，所有上述内容都引用相同的前缀值，即使它们位于不同的块中。这种行为是 Handlebars 4 的新行为，release notes 讨论了先前的行为以及迁移计划。

【讨论】：