2

首先我会说我在 DotNetNuke7 的上下文中工作，它本质上是基于 ASP.net 的框架，而且我对 KO 还很陌生。

我试图有一个 ko 视图模型并在其中有两个 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 时，它将停止工作。同样的事情也会发生。

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

期待解开这个谜团。

谢谢，大卫

4

1 回答 1

1

好吧，我不想这么说，但答案一如既往地简单。我没有将 CSS 的Visible属性 添加到我的视图模型中：{ mdMemberListVisible : Visible }

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

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

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

于 2012-12-16T19:49:27.797 回答