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

IT技术 javascript templates scope each handlebars.js
2021-01-30 14:28:02

我有一个 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>

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

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

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

3个回答

尝试

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

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

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

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

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

我看到许多与 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 的新行为，发行说明讨论了先前的行为以及迁移计划。

其它你可能感兴趣的问题
上一篇React - 从 DOM 元素获取组件以进行调试 下一篇如何从 JavaScript 中的字符串中提取基本 URL？