如何访问 Handlebars 中嵌套循环内的数据？

Question

我有如下数据，其中 keyPairs 是 table 的动态列，data 有行数据。

keyPairs: {
"key0":"Value0",
"key1":"Value1",
    ...
}

data:[
{
"name":"name0",
"key0":"Value0",
"key1":"---",
},

{
"name":"name1",
"key0":"---",
"key1":"Value1",
}]

keyPairs对象是动态创建的，data数组中每个对象使用的键与keyPairs中的键相同。我无法从 keyPairs.

中获取每个 @key 的每个 data 项目的值

{{#each data as | row |}}
    <td>
        {{row.name}}
    </td>

{{#each ../keyPairs}}
    <td>
        {{./row[@key]}}
    </td>
{{/each}}
{{/each}}

Answer 1

我看到了一些问题。

首先，您正在尝试使用 ./row 从您的 #each 中提升上下文级别。但是，正确的语法是两个点，../row.

其次，当您通过使用 ../row 提升上下文级别时，您正在尝试访问父上下文中的 row 属性。但是父对象没有一个 row 属性因为父对象是 row 对象。所以正确的引用应该是 .. 而不是 ../row.

第三，Handlebars 不支持带方括号的动态键求值。你需要使用 lookup helper 来做这个评估，{{lookup .. @key}}.

我创建了一个fiddle供您参考。

Answer 2

首先，感谢 @76484 的回答。其次，我自己得到了答案，这与他给出的答案非常相似。我使用以下语法解决了我的问题。

{{#each data as | row |}}
    <td>
        {{row.name}}
    </td>

{{#each ../keyPairs}}
    <td>
        {{lookup row @key}}
    </td>
{{/each}}
{{/each}}

如何访问 Handlebars 中嵌套循环内的数据？

How to access data inside nested loop in Handlebars?

html

node.js

handlebars.js