15

How to access the index of the grand parent in the nested loop?

For example:

<div class="loop" data-bind="foreach: rows">
    <div class="nested-loop" data-bind="foreach: cells">
        <div class ="nested-nested-loop" data-bind="foreach: candidates, css : {selected : $root.isSelected($parentContext.$parentContext.$index(), $parentContext.$index(), $index())}">
            Candidate index: <span data-bind="text: $index()"></span>
            Cell index: <span data-bind="text: $parentContext.$index()"></span>
            Row index: <span data-bind="text: $parentContext.$parentContext.$index()"></span>
        </div>
    </div>
</div>

I tried to bind like this:

css : {selected : $root.isSelected($parentContext.$parentContext.$index(), $parentContext.$index(), $index())}

and I encountered:

TypeError: $parentContext.$parentContext.$index is not a function

Jeroen
  • 60,696
  • 40
  • 206
  • 339
Suwer
  • 260
  • 3
  • 10

1 Answers1

19

If you want to display the index form the grand-parent you need the $parentContext of the $parentContext, so you need to write: 

Row index: <span data-bind="text: $parentContext.$parentContext.$index()"></span>

http://jsfiddle.net/fjYsG/

It is not working in your css binding because you have the binding on the same element as your foreach so the binding context is not correctly set at their point.

You can solve this with moving the foearch and the css on different elements like using the containrless binding systax:

<div class="loop" data-bind="foreach: rows">
    <div class="nested-loop" data-bind="foreach: cells">
        <!-- ko foreach: candidates -->
            <div class="nested-nested-loop" 
                data-bind="css : {selected : 
                    $root.isSelected($parentContext.$parentContext.$index(), 
                    $parentContext.$index(), $index())}">
              Candidate index: <span data-bind="text: $index()"></span>
              Cell index: <span data-bind="text: $parentContext.$index()"></span>
              Row index:  <span 
                 data-bind="text: $parentContext.$parentContext.$index()"></span>

           </div>
        <!-- /ko -->
    </div>
</div>

Demo JSFiddle.

nemesv
  • 138,284
  • 16
  • 416
  • 359
  • 3
    This is correct. `$parents[1]` works well to get the grandparent $data, but this is the way to get to the binding context. – Joseph Gabriel Dec 10 '13 at 15:16
  • 1
    I wanted to use it in function and I have got this error : TypeError: $parentContext.$parentContext.$index is not a function – Suwer Dec 10 '13 at 15:31
  • I have done the bind : css : {selected : $root.isSelected($parentContext.$parentContext.$index(), $parentContext.$index(), $index())} and when I change the first parameter it works fine. But if not I have this TypeError – Suwer Dec 10 '13 at 15:34
  • Where do you have this css binding? Inside in which foreach. For me it is working fine... http://jsfiddle.net/fjYsG/1/ – nemesv Dec 10 '13 at 15:45
  • I've meant where do you have this css binding inside in your html? Because it is only working if you are inside in the innermost foreach. Can you update my sample working sample: http://jsfiddle.net/fjYsG/2/ with your code? – nemesv Dec 10 '13 at 15:51
  • Thanks for your help. I see that in your example it works. It gives hope. I will try to fix it in my big ugly code. Thanks a lot. – Suwer Dec 10 '13 at 16:06
  • Your css binding cannot be on the element as your foreach. You need to have on two differnt elements. You can use the containerless syntax to make it work: http://jsfiddle.net/7c3PU// I've also updated my answer with this info. – nemesv Dec 10 '13 at 16:09