Question

这有效：

<div data-bind="foreach: { data: roles, as: 'role' }">
    <h3 data-bind="text: role.NamePlural"></h3>
</div>

<div data-bind="foreach: { data: genders, as: 'gender' }">
    <h4 data-bind="text: gender.NamePlural"></h4>
</div>

但这不是：

<div data-bind="foreach: { data: roles, as: 'role' }">
    <h3 data-bind="text: role.NamePlural"></h3>
    <div data-bind="foreach: { data: genders, as: 'gender' }">
        <h4 data-bind="text: gender.NamePlural"></h4>
    </div>
</div>

我只获得第一个role，即它在启动嵌套foreach循环时中断。我做错了什么？

编辑：这是我正在使用的数据

[{"Id":1,
  "Name":"Athlete",
  "NamePlural":"Athletes"},
 {"Id":2,
  "Name":"Referee",
  "NamePlural":"Referees"},
 {"Id":3,
  "Name":"Coach",
  "NamePlural":"Coaches"}]

[{"Id":1,
  "Name":"Female",
  "NamePlural":"Women"},
 {"Id":2,
  "Name":"Male",
  "NamePlural":"Men"}]

Answer 1

如果您的第一个代码有效，则roles和genders位于ViewModel的一个级别中。但是在您的第二个代码中，您尝试将genders用作role的字段您可以将其重写为：

<div data-bind="foreach: { data: roles, as: 'role' }">
    <h3 data-bind="text: role.NamePlural"></h3>
    <div data-bind="foreach: { data: $root.genders, as: 'gender' }">
        <h4 data-bind="text: gender.NamePlural"></h4>
    </div>
</div>

如果您的模型有更多嵌套图层，请使用$parent代替$root。

简单的KnockoutJS嵌套的foreach不起作用

1 个答案: