Knockout.js中带有if:子句的嵌套循环

Nested loops in Knockout.js with if:clause

本文关键字：子句 嵌套循环 if js Knockout      更新时间：2023-09-26

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

no-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更新，所以我很难制作小提琴。请专注于他们自己工作。

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:

在你的帮助下，我设法使循环工作起来了。由于某种原因，将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>

在嵌套循环中使用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>
相关文章：