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