Access $parent's $parent in knockout view - nesting context
Updated for brevity
How can I reference the $parents' $parent in nested Knockout foreach / with bindings?
Example -
<!-- 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 -->
Original
Sorry for the confusing question but I am trying to reach a second level parent's value to check against a value in the current context (like below) to only show a span if it matches a $parent's $parent's value (ugh!)
<!-- 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 -->
It would be easier to do it this way but from what I have read this is not possible or I am doing it wrong :)
<!-- 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 -->
Any help would be greatly appreciated.
Use the $parents
array, the grandparent would be $parents[1]
. You may also be able to use $root
if the grandParent
object in your example is the topmost parent.
From the docs:
$parents
This is an array representing all of the parent view models:
$parents[0] is the view model from the parent context (i.e., it’s the same as $parent)
$parents[1] is the view model from the grandparent context
$parents[2] is the view model from the great-grandparent context
… and so on.
$root
This is the main view model object in the root context, i.e., the topmost parent context. It’s usually the object that was passed to ko.applyBindings. It is equivalent to $parents[$parents.length - 1].
You can use $parentContext.$parent
.
$parentContext
provide many useful properties such as ($data
, $parent
, $index
, ...)