Получение $ index великого родителя во вложенном цикле

Question

Как получить доступ к индексу великого родителя во вложенном цикле?

Например:

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

Я пытался связать так:

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

и я столкнулся:

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

Answer 1

Если вы хотите отобразить индекс формируют Grand- родитель, вам нужно $parentContext$parentContext, поэтому вам нужно написать:

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

http://jsfiddle.net/fjYsG/

Это не работает в вашей css связывания, потому что вы связывание на тот же элемент, как ваш foreach так переплета контекст не правильно установлен на месте их.

Вы можете решить эту проблему с перемещением foearch и css на различных элементах, как с помощью containrless связывания 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.