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

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

Например:

<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 не является функцией

Ответы

Ответ 1

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

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

http://jsfiddle.net/fjYsG/

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

Вы можете решить эту проблему, перемещая foearch и css на разных элементах, например, используя синтакс связывания без содержания:

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

Демо JSFiddle.