Knockoutjs foreach第三個嵌套級別不起作用

Question

這是我使用knockout.js的第一個項目，我遇到了一個我無法解決的問題。我試圖讓foreach具有3級深度的綁定。前兩個級別工作，但第三個級別沒有。我無法看到我的HTML或JavaScript有什麼問題。

<div class="skill-list-body"> 
    <div class="inner-skill-list-body"> 
     <div class="skill-list-publication-title" data-bind="text: publication"></div> 
     <div data-bind="foreach: { data: categories, as: 'category' }">    
      <div> 
       <div class="skill-list-category-title" data-bind="text: category.name"></div> 
       <div class="category-container" data-bind="foreach: { data: realms, as: 'realm' } "> 
        <div class="realm-skill-box"> 
         <div class="skill-list-realm-heading" data-bind="text: name"> 
          <div data-bind="foreach: { data: skills, as: 'skill' }"> 
           <div data-bind="text: skill.name"></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div>    
     </div> 
    </div> 
</div> 

的JavaScript

var viewModel = { 
    publication: 'Medieval Fantasy Skills', 
    categories: ko.observableArray([ 
      { 
      name: 'Physical & Social Combat Skills', 
      realms: ko.observableArray([ 
        { 
         name: 'The Realm of Combat Tactics Skills', 
         skills: ko.observableArray([ 
           { name: 'Craft Profession', id: 0 } 
          ]) 
        } 
       ]) 
      } 
     ]) 
}; 

ko.applyBindings(viewModel); 

Answer 1

問題是這樣的就在這裏：

<div class="skill-list-realm-heading" data-bind="text: name"> 
<div data-bind="foreach: { data: skills, as: 'skill' }, "> 
    <div data-bind="text: skill.name"></div> 
</div> 
</div> 

你的外name有效結合抹了節點的內容。使技能成爲節點的兄弟姐妹，而不是孩子。

<div class="skill-list-realm-heading" data-bind="text: name"></div> 
<div data-bind="foreach: { data: skills, as: 'skill' }, "> 
    <div data-bind="text: skill.name"></div> 
</div> 

Answer 2

您需要關閉名div標籤打開foreachthe結合 -

http://jsfiddle.net/a3L60L4h/

<div class="skill-list-realm-heading" data-bind="text: name"> 
</div> 
<div data-bind="foreach: { data: skills, as: 'skill' }"> 
    <div data-bind="text: skill.name"></div> 
</div> 

這是因爲這個名字結合覆蓋的innerHTML其中包含foreach循環