javascript - Access $parent's $parent in knockout view - nesting context

Question

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.

score 138 · Accepted Answer

使用$parents数组，祖父母将是$parents[1]. $root如果grandParent您的示例中的对象是最顶层的父对象，您也可以使用。

从文档：

$父母

这是一个代表所有父视图模型的数组：

$parents[0] 是来自父上下文的视图模型（即，它与 $parent 相同）

$parents[1] 是来自祖父母上下文的视图模型

$parents[2] 是来自曾祖父母上下文的视图模型

… 等等。

$根

这是根上下文中的主视图模型对象，即最顶层的父上下文。它通常是传递给 ko.applyBindings 的对象。它相当于 $parents[$parents.length - 1]。

score 10 · Accepted Answer

您可以使用$parentContext.$parent.

$parentContext提供许多有用的属性，例如 ( $data, $parent, $index, ...)

score 0 · Accepted Answer

我认为像这样使用 noChildContext 设置会更容易：

使用“as”而不创建子上下文

as 选项的默认行为是为当前项目添加名称，同时仍将内容绑定到项目。但您可能更喜欢保持上下文不变，只设置当前项目的名称。后一种行为可能是未来版本的 Knockout 中的默认行为。要为特定绑定打开它，请将 noChildContext 选项设置为 true。当此选项与 as 一起使用时，对数组项的所有访问都必须通过给定名称，并且 $data 将保持设置为外部视图模型。例如：

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

在这里阅读更多

javascript - Access $parent's $parent in knockout view - nesting context

3 回答 3

Related

Reference