Nodejs handlebars each 套each 取值有什么要注意的吗

Nodejs handlebars each 套each 取值有什么要注意的吗

{{#each A}}
{{#each B}}
…
{{/each}}
{{/each}}

我想在最内层分别取A表和B表里的字段，请问格式有什么要求。直接最里层填A和B的<字段名>或 <表名.字段> 都显示不出来值 或者这样的格式不能写。需要自己定义他的helpers吗?

3 回复

当然可以！在 Handlebars 模板引擎中，当你使用嵌套的 {{#each}} 循环时，你需要确保正确地访问嵌套上下文中的数据。以下是一个详细的示例和解释。

示例数据结构

假设我们有以下数据结构：

const data = {
    A: [
        { id: 1, items: [
            { name: 'Item 1', value: 10 },
            { name: 'Item 2', value: 20 }
        ]},
        { id: 2, items: [
            { name: 'Item 3', value: 30 },
            { name: 'Item 4', value: 40 }
        ]}
    ]
};

Handlebars 模板

你可以这样编写模板来正确地访问嵌套的数据：

{{#each A as |item|}}
    <div>
        <h2>A item ID: {{item.id}}</h2>
        <ul>
            {{#each item.items as |subItem|}}
                <li>
                    B item Name: {{subItem.name}}, Value: {{subItem.value}}
                </li>
            {{/each}}
        </ul>
    </div>
{{/each}}

解释

  1. 外部循环 ({{#each A as |item|}})：遍历 A 数组中的每个对象。
  2. 内部循环 ({{#each item.items as |subItem|}})：遍历当前 A 对象中的 items 数组。
  3. 访问字段：在内部循环中，{{subItem.name}} 和 {{subItem.value}} 分别表示 items 数组中的子项。

注意事项

  • 别名：使用 as |variable| 来为当前上下文创建一个别名（如 item 和 subItem），这使得代码更易读且避免了潜在的命名冲突。
  • 上下文：在内部循环中，this 指向当前迭代的对象，因此可以直接通过 subItem 访问其属性。

自定义 Helper

如果你需要更复杂的逻辑或自定义函数，可以考虑在 Node.js 中定义自定义的 Handlebars helper。例如：

Handlebars.registerHelper('customFunction', function(context) {
    // 在这里添加你的逻辑
    return context;
});

然后在模板中使用它：

{{#each A as |item|}}
    <div>
        <h2>A item ID: {{item.id}}</h2>
        <ul>
            {{#each item.items as |subItem|}}
                <li>
                    {{customFunction subItem.name}}: {{subItem.value}}
                </li>
            {{/each}}
        </ul>
    </div>
{{/each}}

通过这种方式，你可以更好地控制和扩展 Handlebars 的功能。


我用的是express3-handlebars 有对这个了解的吗。请教下

在使用 Handlebars 模板引擎时，当你在一个 each 循环中嵌套另一个 each 循环，你需要正确地引用外层循环中的变量。直接在内层循环中访问外层循环的变量时，可以使用特殊的上下文访问方式。

例如：

{{#each A as |a|}}
    {{#each B as |b|}}
        {{a.someField}} - {{b.someField}}
    {{/each}}
{{/each}}

在这个例子中，a 和 b 分别代表 A 和 B 数组中的当前项。你可以通过这种方式来访问每一层循环中的字段。

如果你发现某些值无法正常显示，可能是因为数据结构不匹配或者 Handlebars 的上下文没有正确传递。确保你的数据结构是正确的，并且每个 each 循环都能访问到相应的数组。

通常情况下，不需要自定义额外的 helpers 来实现这种嵌套循环的场景。如果你遇到问题，可以检查数据结构和模板语法是否正确。

如果需要更复杂的逻辑，可以通过注册一个自定义 helper 来处理。

回到顶部