javascript 在淘汰赛视图中访问 $parent 的 $parent - 嵌套上下文

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

提问by PW Kad

Updated for brevity

为简洁而更新

How can I reference the $parents' $parent in nested Knockout foreach / with bindings?

如何在嵌套的 Knockout foreach / 中使用绑定引用 $parents 的 $parent？

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

抱歉这个令人困惑的问题，但我试图达到二级父级的值以检查当前上下文中的值（如下所示），如果它与 $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 -->

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.

任何帮助将不胜感激。

回答by Matt Burland

Use the $parentsarray, the grandparent would be $parents[1]. You may also be able to use $rootif the grandParentobject in your example is the topmost parent.

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

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

$父母

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

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

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

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

… 等等。

$root

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

回答by Hassan Alhaj

You can use $parentContext.$parent.

您可以使用$parentContext.$parent.

$parentContextprovide many useful properties such as ($data, $parent, $index, ...)

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

回答by cjohansson

I think it would be easier to use the noChildContext setting like this:

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

Using “as” without creating a child context

The default behavior of the as option is to add a name for the current item while still also binding the contents to the item. But you may prefer keep the context unchanged and only set the name of the current item. This latter behavior will probably be the default in a future version of Knockout. To turn it on for a specific binding, set the noChildContext option to true. When this option is used along with as, all access to the array items must be through the given name, and $data will remain set to the outer viewmodel. For example:

使用“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>

Read more here

在这里阅读更多