Javascript Knockoutjs foreach第三个嵌套级别不工作

这是我第一个使用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>

---

您需要关闭name div标记以打开绑定的foreach-

---

这是因为名称绑定覆盖了包含foreach循环的innerHtml。问题就在这里：

<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>

---

你能在JSFIDLE中重现这个问题吗？

<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>

<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 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>