Question

帮忙。我有22个对象，5个父母和17个孩子。我无法得到你的孩子。使用数据绑定淘汰js。仅显示5个父级。提前谢谢。

Index.js

self._routes = ko.observableArray([]);
    self._child = ko.observableArray([]);
    for (var i = 0; i < backend.user().UserScreens.length; i++) {
        var str = backend.user().UserScreens[i].addOn; //add icon
        str = str.substring(0, str.length - 1); //trim last character ','
        if (backend.user().UserScreens[i].isParent || backend.user().UserScreens[i] == null) {
            self._routes.push({
                route: backend.user().UserScreens[i].linkURL,
                title: backend.user().UserScreens[i].description,
                moduleId: 'modules/' + backend.user().UserScreens[i].linkURL.replace(/[\n\r]+/g, '').replace(/\s{2,10}/g, ' ') + '/index',
                nav: true,
                _icon: 'fa ' + str,
                _id: '#' + backend.user().UserScreens[i].id
            });
        }
        else {
            self._child.push({
                childRoute: backend.user().UserScreens[i].linkURL,
                childtitle: backend.user().UserScreens[i].description,
                childmoduleId: 'modules/' + backend.user().UserScreens[i].linkURL.replace(/[\n\r]+/g, '').replace(/\s{2,10}/g, ' ') + '/index',
                childNav: true,
                childIcon: 'fa ' + str,
                childId: '#' + backend.user().UserScreens[i].id
            });
        }
    }

的index.html

<ul class="nav">
                <li data-bind="foreach: _routes"> 
                    <a data-bind="attr: { href: _id }"><span data-bind="attr: {class: _icon}"></span>
                        <span class="sidebar-title" data-bind="text: title"></span><span class="caret"></span>
                    </a>
                    <ul data-bind="foreach: _child, attr: {id: childId}" class="nav sub-nav">
                        <li><a href="#" data-bind="attr: {href: '#' + childRoute}">
                            <span data-bind="attr: {class: _icon}"></span>
                            <span data-bind="text: childtitle"></span></a>
                        </li>
                    </ul>
                </li>
            </ul>

Answer 1

您的模型会在同一级别显示_routes和_child。

self._routes = ko.observableArray([]);
self._child = ko.observableArray([]);

因此child上的foreach将因child属性不存在而失败。修复方法是从foreach路线中删除child或添加$parent

<ul class="nav">
    <li data-bind="foreach: _routes"> 
        <a data-bind="attr: { href: _id }"><span data-bind="attr: {class: _icon}"></span>
            <span class="sidebar-title" data-bind="text: title"></span><span class="caret"></span>
        </a>
        <!-- ko foreach: $parent._child -->
        <ul data-bind="attr: {id: childId}" class="nav sub-nav">
            <li><a href="#" data-bind="attr: {href: '#' + childRoute}">
                <span data-bind="attr: {class: _icon}"></span>
                <span data-bind="text: childtitle"></span></a>
            </li>
        </ul>
        <!-- /ko -->
    </li>
</ul>

但是这会显示所有路线的孩子，但是我看不到路线和孩子之间的任何关联，所以这可能就是你所期待的。

获取列表ui li dropdown knockout.js数据绑定的子项

1 个答案: