2012-12-16 41 views
2

我會開始說我正在DotNetNuke7,這基本上是基於ASP.net的框架的上下文,而且我是相當新的KO。多個'foreach'循環在一個基因敲除JS

我想擁有一個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的用戶控制)I放置在下面的代碼

<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 verse。

有沒有人有線索爲什麼會發生?我可以在一個視圖模型中沒有2個循環嗎?

期待解決這個謎。

感謝, 大衛

回答

1

好吧,我討厭這樣說,但答案是總是很簡單。我沒有添加到我的視圖模型的可見屬性 CSS:{mdMemberListVisible:可見}

當我創建了一個新的腳本文件,我只是跳過這個屬性。幾節課:

  1. 您可以在一個視圖模型中運行多個循環。
  2. 始終檢查您是否擁有在視圖模型中定義的所有屬性。

此外,顯然它有助於在此板上創建一個問題,因爲它使您清楚地思考問題並重新訪問您的操作。在發佈我的問題之前,我花了2個小時追逐這個問題,然後在我發佈後花了15分鐘解決它。