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

时间:2013-06-12 15:26:06

标签: javascript knockout.js

为了简洁而更新

如何在嵌套的Knockout foreach / with bindings中引用$ 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的父级值(呃!)

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

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:128)

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

来自docs

  

<强> $父母

     

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

     

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

     

$ parents [1]是来自祖父母背景的视图模型

     

$ parents [2]是来自曾祖父母背景的视图模型

     

......等等。

     

<强> $根

     

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

答案 1 :(得分:7)

您可以使用$parentContext.$parent

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

答案 2 :(得分:0)

我认为使用noChildContext这样的设置会更容易:

  

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

     

as选项的默认行为是为当前项目添加名称,同时还将内容绑定到该项目。但是您可能希望保持上下文不变,仅设置当前项目的名称。后一种行为可能是将来版本的Knockout中的默认行为。要为特定绑定打开它,请将noChildContext选项设置为true。当将此选项与as一起使用时,对数组项的所有访问都必须通过给定名称进行,并且$ data将保持设置为外部viewmodel。例如:

<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