如何在每个帮手的车把内使用其他模板值?

问题描述 投票:0回答:2

我有一个包含数组的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数据的其他部分?有没有办法做到这一点?

handlebars.js each require-handlebars
2个回答
1
投票

因为当你使用{{#each}}时,你在一个子环境中,这是list,现在你想访问firstName,这是在父语境中,你可以使用{{../firstName}}来访问它,就像这样。

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

来自documentation

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


0
投票

我是新手,所以我不确定我需要寻找什么术语。事实证明,我能够找到答案,并想留下我的问题以防其他人有同样的问题。事实证明你不能使用{{firstName}}并且在我的例子中按预期获得Alan的原因是你在json数据中的“list”的上下文中。要返回到json数据的根,您需要使用如下语法:

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

您可以在上面看到我使用{{../firstName}}在请求firstName值之前将一个级别提升到根目录。这对我有用,我希望它可以帮助别人。

© www.soinside.com 2019 - 2024. All rights reserved.