title: Multiple 'foreach' loops in one knockout JS
body: <p>I'll start by saying that I am working within the context of DotNetNuke7, which is essentially ASP.net based framework, and that i am fairly new to KO.</p>
  
  <p>I am trying to have one ko viewmodel and have two foreach loops in it. Each loop renders an array which is part of the view model definition like so:</p>
  
  <pre><code>    //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);
  </code></pre>
  
  <p>In the html context (or the asp user control) i placed the following code
           </p>
  
  <pre><code>&lt;div id="socialDirectory" class="dnnForm dnnMemberDirectory"&gt;
      &lt;ul id="mdMemberList" class="mdMemberList dnnClear" style="display:none" 
           data-bind="foreach: { data: NonCircleMembers, afterRender: handleAfterRender }, 
                          css: { mdMemberListVisible : Visible }, visible: HasMembers()"&gt;
          &lt;li class="memberItem"&gt;
  
              &lt;div data-bind="visible: $parent.isEven($data)"&gt;
                  &lt;%=MemberItemTemplate %&gt;
              &lt;/div&gt;            
              &lt;div data-bind="visible: !$parent.isEven($data)"&gt;
                  &lt;%=MemberAlternateItemTemplate %&gt;
              &lt;/div&gt;            
  
          &lt;/li&gt;
      &lt;/ul&gt;  
  &lt;/div&gt;
  
  &lt;div class="circleDirectory"  id="circleDirectory"  &gt;
  
      &lt;ul id="cdMembersList" data-bind =" foreach: {data: CircleMembers, afterRender: handleAfterRender}"&gt;
              &lt;li class="memberItem"&gt; 
                 &lt;div class="mdMemberDetails"&gt;
                      &lt;a href="" class="mdMemberImg" data-bind="attr: { title: DisplayName, href: ProfileUrl }"&gt;
                          &lt;span&gt;&lt;img data-bind="attr: { src: getProfilePicture(50,50), title: DisplayName }" /&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class="MdMemberInfo"&gt;
                          &lt;li class="mdDisplayName" &gt;
                                  &lt;a href="" title="" class="mdMemberTitle" 
                                      data-bind="attr: { title: DisplayName, href: ProfileUrl }, 
                                      event: { mouseover: $parent.showPopUp }"&gt;
                                  &lt;span data-bind="text: DisplayName"&gt;&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;  
                          &lt;li class="mdTitle"&gt;&lt;p&gt;&lt;span data-bind="text: Title"&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;
                          &lt;li class="mdLocation"&gt;&lt;p&gt;&lt;span data-bind="text: Location()"&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Each one of the DIVs which contain the foreach binding loop in them works perfectly well without the other. For instance, the bottom div (id= cdMembersList) will work fine but when I add the upper div with the binding markups it will stop working. The same thing happens vise verse. </p>
  
  <p>Does anybody have a clue why it might happen? Can i not have 2 loops in one view model?</p>
  
  <p>looking forward to solving this mystery.</p>
  
  <p>thanks,
  David </p>