Обновлено для краткости
Как я могу ссылаться на родительский элемент $ parent во вложенном Knockout foreach / с привязками?
Пример -
<!-- ko foreach: grandParent -->
<tr>
<!-- ko foreach: $parent.parents --> // <-- Doesn't work
<!-- ko foreach: children -->
<td data-bind="if: favToy().name == $parent.$parent.favToy().name">
<span data-bind="text: favToy().name"></span>
</td>
<!-- /ko -->
<!-- /ko -->
</tr>
<!-- /ko -->
Оригинал
Извините за сбивающий с толку вопрос, но я пытаюсь достичь родительского значения второго уровня, чтобы проверить значение в текущем контексте (как показано ниже), чтобы показать диапазон только в том случае, если он соответствует значению $ parent $ parent (тьфу!)
<!-- ko foreach: grandParent -->
<tr>
<!-- ko foreach: $parent.parents -->
<!-- ko foreach: children -->
<td data-bind="if: favToy().name == $parent.$parent.favToy().name">
<span data-bind="text: favToy().name"></span>
</td>
<!-- /ko -->
<!-- /ko -->
</tr>
<!-- /ko -->
Было бы проще сделать так, но из того, что я читал, это невозможно или я делаю это неправильно :)
<!-- ko foreach: grandParent -->
<tr>
<!-- ko foreach: $parent.parents -->
<!-- ko foreach: children ? favToy().name == $parent.$parent.favToy().name -->
<td data-bind="text: favToy().name"></td>
<!-- /ko -->
<!-- /ko -->
</tr>
<!-- /ko -->
Любая помощь будет принята с благодарностью.
javascript
knockout.js
PW Kad
источник
источник
$parent.$parent
или то, что вы должны использовать,span
потому что вы не можете объединитьforeach
иif
?Ответы:
Используйте
$parents
массив, дедушка или бабушка$parents[1]
. Вы также можете использовать,$root
еслиgrandParent
объект в вашем примере является самым верхним родителем.Из документов :
источник
$parent.$parent
у меня не сработало, но это решение работало нормально, да и короче!Вы можете использовать
$parentContext.$parent
.$parentContext
обеспечивают много полезных свойств , таких как ($data
,$parent
,$index
, ...)источник
Думаю, было бы проще использовать параметр noChildContext следующим образом:
<ul data-bind="foreach: { data: categories, as: 'category', noChildContext: true }"> <li> <ul data-bind="foreach: { data: category.items, as: 'item', noChildContext: true }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul>
Подробнее здесь
источник