Ответ 1
Если вы хотите отобразить форму индекса grand-parent, вам нужен $parentContext
$parentContext
, поэтому вам нужно написать:
Row index: <span data-bind="text: $parentContext.$parentContext.$index()"></span>
Он не работает в вашей привязке 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.