Question

我首先要说的是我在DotNetNuke7的背景下工作，DotNetNuke7本质上是基于ASP.net的框架，而且我对KO来说相当新。

我正在尝试拥有一个ko viewmodel并且在其中有两个foreach循环。每个循环渲染一个数组，它是视图模型定义的一部分，如下所示：

    //We build two arrays: one for the users that are in the group 
    //and one for the users that are not in the group 
    var nonGroupMembers = $.map(initialData.NonGroupUsers, function (item) { return new   Member(item); });
    var groupMembers = $.map(initialData.GroupUsers, function (item) { return new Member(item); });

    //The members we start with before we added new members 
    self.SearchTerm = ko.observable('');
    self.CircleMembers = ko.observableArray(groupMembers);
    self.NonCircleMembers = ko.observableArray(nonGroupMembers);

在html上下文（或asp用户控件）中，我放置了以下代码

<div id="socialDirectory" class="dnnForm dnnMemberDirectory">
    <ul id="mdMemberList" class="mdMemberList dnnClear" style="display:none" 
         data-bind="foreach: { data: NonCircleMembers, afterRender: handleAfterRender }, 
                        css: { mdMemberListVisible : Visible }, visible: HasMembers()">
        <li class="memberItem">

            <div data-bind="visible: $parent.isEven($data)">
                <%=MemberItemTemplate %>
            </div>            
            <div data-bind="visible: !$parent.isEven($data)">
                <%=MemberAlternateItemTemplate %>
            </div>            

        </li>
    </ul>  
</div>

<div class="circleDirectory"  id="circleDirectory"  >

    <ul id="cdMembersList" data-bind =" foreach: {data: CircleMembers, afterRender: handleAfterRender}">
            <li class="memberItem"> 
               <div class="mdMemberDetails">
                    <a href="" class="mdMemberImg" data-bind="attr: { title: DisplayName, href: ProfileUrl }">
                        <span><img data-bind="attr: { src: getProfilePicture(50,50), title: DisplayName }" /></span>
                    </a>
                    <ul class="MdMemberInfo">
                        <li class="mdDisplayName" >
                                <a href="" title="" class="mdMemberTitle" 
                                    data-bind="attr: { title: DisplayName, href: ProfileUrl }, 
                                    event: { mouseover: $parent.showPopUp }">
                                <span data-bind="text: DisplayName"></span>
                            </a>
                        </li>  
                        <li class="mdTitle"><p><span data-bind="text: Title"></span></p></li>
                        <li class="mdLocation"><p><span data-bind="text: Location()"></span></p></li>
                    </ul>
                </div>
            </li>
    </ul>
</div>

每个包含foreach绑定循环的DIV在没有另一个的情况下运行良好。例如，底部div（id = cdMembersList）将正常工作，但是当我添加带有绑定标记的上部div时，它将停止工作。 vise也是如此。

有人知道为什么会发生这种情况吗？我可以在一个视图模型中没有2个循环吗？

期待解开这个谜团。

感谢，大卫

Answer 1

好的，我不想这么说，但答案很简单。我没有为我的视图模型添加 Visible 属性 css：{mdMemberListVisible：Visible}

当我创建一个新的脚本文件时，我只是跳过了这个属性。几节课：

您可以在一个视图模型中运行多个循环。
始终检查您是否在视图模型中定义了所有属性。

此外，显然它有助于在此板上创建问题，因为它可以让您清楚地思考问题并重新审视您的操作。在我发布问题之前，我花了2个小时追逐这个问题，然后我发布它后花了15分钟解决它。

在一个淘汰赛JS中有多个'foreach'循环

1 个答案: