javascript - Handlebars 范围问题 : Can't access template variable from embedded `each`

标签 javascript html templates handlebars.js keystonejs

我想弄清楚为什么我无法从 Handlebars 模板(在我的 keystone 项目中呈现)的嵌入 each 语句中访问我的模板变量。我在 StackOverflow 上阅读了许多类似问题的问题,但没有一个解决了我的特定用例。

我有一个简单的数据对象,它被传递到 Handlebars 模板,看起来 [大致] 像这样:

{ 
   rootPath: '../../../', 
   navigation: { all: { 'a': { sublinks: [Object] }
}

我的问题是:

为什么 rootPath 模板变量在 {{#each navigation.all}} 中完美打印,但无法从 {{#each sublinks}} 中访问?

这是我的 Handlebars 模板:

<!-- rootPath prints fine here -->
Here is your rootPath variable: {{rootPath}}

{{#each navigation.all}}

    <!-- rootPath prints fine here -->
    top-level rootPath: {{../rootPath}}

    {{#if sublinks}}

            {{#each sublinks}}

                <!-- WHY WON'T ROOTPATH PRINT HERE?? -->
                <!-- Obviously, I am trying the three possible scope paths -->
                sub-level rootPath attempt 1: {{../../rootPath}}
                sub-level rootPath attempt 2: {{../rootPath}}
                sub-level rootPath attempt 3: {{rootPath}}

            {{/each}}

    {{/if}}

{{/each}}

我得到以下输出(注意所有子级别尝试如何无法访问rootPath 模板变量):

Here is your rootPath variable: ../../../
top-level rootPath: ../../../
sub-level rootPath attempt 1:
sub-level rootPath attempt 2:
sub-level rootPath attempt 3:

我需要的是让 rootPath 在任何地方都可用,这样我就可以得到这样的东西:

Here is your rootPath variable: ../../../
top-level rootPath: ../../../
sub-level rootPath: ../../../

那么我在这里遗漏了什么范围问题或语法?

我使用的是 Handlebars 版本 2.0.0,因为这是 keystone 预先打包的版本.

最佳答案

我能够使用 @root token 解决问题。

只需从嵌入式 {{#each sublinks}} 中调用 @root.rootPath 就足以解决我的问题。

这是正确的模板标记:

Here is your rootPath variable: {{rootPath}}

{{#each navigation.all}}

    top-level rootPath 1: {{../rootPath}}      <!-- works -->
    top-level rootPath 2: {{@root.rootPath}}   <!-- works -->

    {{#if sublinks}}

            {{#each sublinks}}
                sub-level rootPath 1: {{@root.rootPath}}  <!-- works -->
                sub-level rootPath 2: {{../../rootPath}}  <!-- doesn't work -->
            {{/each}}

    {{/if}}

{{/each}} 

产生以下输出:

Here is your rootPath variable: ../../../
top-level rootPath 1: ../../../
top-level rootPath 2: ../../../
sub-level rootPath 1: ../../../
sub-level rootPath 2: 

Note: for the top-level rootPath (in {{#each navigation.all}}, I could use either one of these:

{{../rootPath}}      <!-- works -->
{{@root.rootPath}}   <!-- works -->

但是,从嵌入的{{#each sublinks}}中,只有@root.rootPath似乎有效:

{{@root.rootPath}}  <!-- works -->
{{../../rootPath}}  <!-- doesn't work -->

关于javascript - Handlebars 范围问题 : Can't access template variable from embedded `each` ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32796559/

相关文章:

php - 调用通用静态类方法 php

javascript - 如何使 Youtube 嵌入适合屏幕高度,同时让它的宽度溢出

Css div 模板

c# - 当方法有参数时 Ajax 回调失败

html - 防止编辑器将以百分比为单位的标签宽度大小转换为像素单位

html - 删除多列后单元格宽度相等

html - 有没有办法使嵌套列表有效?

c++ - 处理模板参数中的 cv 修饰符

javascript - 使用 MobX 中的 `useLocalObservable` 来处理 TypeScript 时出现 TypeError?

javascript - 将 AJAX 字符串返回到数组