0
<div id="tree"  data-role="collapsible-set"  data-bind="foreach:VM1.Folders"> **Parent Loop**
      <!--Top level Folder-->
      <div data-role="collapsible" class="Folder" data-bind="attr:{'id':$index()}">   
        <h3><span data-bind="text:name"></span></h3>

            <!--Sub Folder start-->
             <div data-bind="attr:{'id':'subtree'+$index()} ">   
           <!-- ko stopBinding: true -->                  
              <div data-bind="foreach:VM2.SubFolders" data-role="collapsible-set">
                   <div data-role="collapsible" class="SubFolder"
                   data-bind="attr{'id':$parentContext.$index}"> **This gives undefined**                               
                            <h3><span data-bind="text:name"></span></h3>
                   </div>
               </div>   
           <!--/ko-->                
             </div>
           <!--End Of Sub Folder-->
      </div>
    <!--End Of Top level Folder-->

</div>

I am using knockout foreach binding to create jquery mobile collapsible items dynamically facing problem when accessing parent loops $index(). I tried both $parentContext.$index() and $parentContext.$index. Both are giving 'undefined'. I am using stop binding, is it because of that it is not able to get parent loop index? Following is my code.

user1855588
  • 77
  • 1
  • 11

1 Answers1

1

You should replace the line:

data-bind="attr{'id':$parentContext.$index}"> **This gives undefined**

for:

data-bind="attr{'id':$parentContext.$index()}"> **This gives undefined**

since $index is observable, just like you did in line 3.

Ariel Fernández Cabañas
  • 11
  • 2