Question

我有一个包含数组的json数据块（示例）

var data = { firstName: "Alan", lastName: "Johnson", list: [1,2,3] };

我想使用#each语法遍历数组中的项目，并为包含数组中的项目以及传入的json数据的另一项的每个项目创建一个字符串。这就是我正在尝试的：

var ui  = "<p>{{lastName}}, {{firstName}}</p>";
ui  = ui + "{{#each list}}";
ui  = ui + "    {{this}} - {{ firstName }}";
ui  = ui + "{{/each}}";

var template = Handlebars.compile(ui);

console.log(template(data));

但是它没有输出我所期望的。我明白了（错误）：

<p>Johnson, Alan</p>    1 -     2 -     3 -

但是我想看到这个：

<p>Johnson, Alan</p>    1 -Alan     2 -Alan     3 -Alan

为什么我似乎无法在#each块中使用json数据的其他部分？有办法吗？

Answer 1

由于使用{{#each}}时，您处于子上下文中，list，现在您要访问父上下文中的firstName，您可以像这样使用{{../firstName}}进行访问。

{{#each list}}
    {{this}} - {{../firstName}}
{{/each}}

从documentation，

嵌套的每个块都可以基于深度访问迭代变量路径。要访问父索引，例如，{{@ .. / index}}可以是使用。

Answer 2

我是车把的新手，所以我不确定要搜索什么术语。事实证明，我能够找到答案，并想把我的问题保留下来，以防其他人遇到相同的问题。事实证明，您不能仅使用{{firstName}}并按我的示例中的预期获得Alan的原因是，您处于json数据中“列表”的上下文中。要恢复到json数据的根，您需要使用如下语法：

var ui  = "<p>{{lastName}}, {{firstName}}</p>";
ui  = ui + "{{#each list}}";
ui  = ui + "    {{this}} - {{ ../firstName }}";
ui  = ui + "{{/each}}";

您可以在上方看到我在请求firstName值之前使用{{../firstName}}到根目录下一级。这对我有用，我希望它可以帮助其他人。

如何在每个帮助器的车把内使用其他模板值？

2 个答案: