Knockout.js 和 if:clause 中的嵌套循环

Question

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

以下语句单独使用时效果很好，但当我将它们组合在一起时，内部语句不起作用，也不会引发错误。

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

专家有一个属性数组，其中包含分配给特定用户的所有 ExpertRoles。外循环用于打印所有 ExpertRoles，内循环用于打印与外循环的 Expert 角色相匹配的 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:，等等）

这是我的视图模型的一部分，数据由 SignalR 更新，所以我很难制作 fiddle。请关注 他们自己工作。

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：

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

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

Knockout.js 和 if:clause 中的嵌套循环

Nested loops in Knockout.js with if:clause

html

javascript

knockout.js