我在 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>
最佳答案
当您在嵌套循环中使用 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>
关于javascript - Knockout.js 中使用 if :clause 的嵌套循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29389924/