簡單KnockoutJS嵌套的foreach不工作

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是在您的視圖模型的一個級別的數據。但在第二個代碼中，您嘗試使用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如果你的模型具有多個嵌套層。