javascript - Knockout.js 中使用 if :clause 的嵌套循环

Question

我在 KO 中嵌套 foreach 语句时遇到问题。

以下语句单独工作正常，但当我将它们组合起来时，内部语句不起作用，也不会引发错误。

理想情况下，我希望内部联接是有条件的，但我已经在没有 if 子句的情况下尝试过，但仍然没有成功。

专家拥有分配给特定用户的所有专家 Angular 色的属性数组。外循环用于打印所有 ExpertRoles，内循环用于打印与外循环的 Expert Angular 色匹配的 Expert

第一个 foreach:有效

<ul data-bind="foreach: ExpertRoles">
    <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': Id }, text: Name">       
    </li>
</ul>

第二个foreach:有效

<ul data-bind="foreach: Experts">
    <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': ConnectionId, 'title': Username }">
        <a href="javascript:void(0);" data-bind="text: Username"></a>
    </li>
</ul>

与if子句结合:内循环不起作用，不会抛出错误

<ul data-bind="foreach: ExpertRoles">
    <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': Id }, text: Name">
        <ul data-bind="foreach: Experts">
            <li class="expert ui-menu-item" role="menuitem" data-bind="if: ExpertRoles.indexOf($parent.Id) > 0, attr: { 'data-cid': ConnectionId, 'title': Username }">
                <a href="javascript:void(0);" data-bind="text: Username"></a>
            </li>
        </ul>
    </li>
</ul>

没有 if 子句:内部循环不起作用，不会引发错误

<ul data-bind="foreach: ExpertRoles">
    <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': Id }, text: Name">
        <ul data-bind="foreach: Experts">
            <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': ConnectionId, 'title': Username }">
                <a href="javascript:void(0);" data-bind="text: Username"></a>
            </li>
        </ul>
    </li>
</ul>

编辑:

让我补充一下，我已经尝试过无容器语法( <!-- ko foreach:, <!-- ko if: 等)

这是我的 View 模型的一部分，数据由 SignalR 更新，因此我很难进行修改。请关注他们自己工作。

var viewModel = {
    Users: ko.mapping.fromJS([]),
    ExpertRoles: ko.mapping.fromJS([])
};

// experts are a subset of users
viewModel.Experts = ko.computed(function () {
    return ko.utils.arrayFilter(this.Users(), function (item) {
        return item.IsExpert() === true;
    });
}, viewModel);

编辑2:

在你的帮助下，我成功地使循环工作了。由于某种原因绑定(bind)Name在外部li导致内循环停止工作。

<ul>
    <!-- ko foreach: $root.ExpertRoles -->
        <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': Id }">

            <span data-bind="text: Name"></span>
            <ul>
                <!-- ko foreach: $root.Experts -->                                    
                    <li class="expert ui-menu-item" role="menuitem" data-bind="attr: { 'data-cid': ConnectionId }">
                        <a href="javascript:void(0);" data-bind="text: Username"></a>
                    </li>
                <!-- /ko -->
            </ul>

        </li>
    <!-- /ko -->
</ul>

Answer 1

当您在嵌套循环中使用 foreach 时，您只能访问父模型的属性。 Experts 不是 ExpertRoles 中项目的属性。它是 viewModel 模型的属性。这就是为什么它不起作用。尝试使用 $root:

<ul data-bind="foreach: $root.Experts">
    <li class="expert ui-menu-item" role="menuitem" data-bind="if: $root.ExpertRoles.indexOf($parent.Id) >= 0, attr: { 'data-cid': ConnectionId, 'title': Username }">
        <a href="javascript:void(0);" data-bind="text: Username"></a>
    </li>
</ul>