Knockout.js foreach第三嵌套级别不起作用 [英] Knockoutjs foreach third nested level not working

问题描述

这是我的第一个使用基因敲除(knockout.js)的项目，但有一个我无法解决的问题.我正在尝试让foreach绑定3级深度.前两个级别有效，但第三个级别无效.我的HTML或JavaScript都看不到任何问题.

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 one does not. I can't see anything wrong with either my HTML or 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

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

推荐答案

问题就在这里:

<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绑定有效地擦除了节点的内容.使技能成为节点的同胞，而不是孩子.

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>

这篇关于Knockout.js foreach第三嵌套级别不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！