在挖空视图中访问$parent的$parent - 嵌套上下文

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

本文关键字：parent 嵌套 上下文 访问 视图      更新时间：2023-09-26

为简洁起见进行了更新

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

例-

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

任何帮助将不胜感激。

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

从文档中：

$parents

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

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

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

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

。等等。

$root

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

您可以使用

$parentContext.$parent .

$parentContext提供了许多有用的属性，例如($data、$parent、$index、...(。

我认为像这样使用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>

在此处阅读更多内容

相关文章：