Knockoutjs Foreach Third Nested Level Not Working

This is my first project using knockout.js and I'm having an issue I can't resolve. I'm attempting to have foreach binding 3 levels deep. The first two levels work, but the third o

Solution 1:

The problem is this right here:

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

Your outer name binding effectively wipes out the contents of the node. Make the skills a sibling of the node, not a child.

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

Solution 2:

You need to close the name div tag to open the foreachthe binding -

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>

This is because the name binding overwrites the innerHtml which contains the foreach loop