web-dev-qa-db-ja.com

ノックアウトビューで$ parentの$ parentにアクセスする-ネストコンテキスト

簡潔にするために更新

ネストされた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 -->

オリジナル

紛らわしい質問で申し訳ありませんが、2番目のレベルの親の値に到達して現在のコンテキストの値（以下のように）をチェックし、$ parentの$ parentの値と一致する場合にのみスパンを表示しようとしています（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 -->

このようにするのは簡単ですが、私が読んだことからこれは不可能であるか、間違っています:)

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

どんな助けも大歓迎です。

javascriptknockout.js
74
PW Kad

$parents配列を使用すると、祖父母は$parents[1]になります。例のgrandParentオブジェクトが最上位の親である場合は、$rootを使用することもできます。

docs から：

$ parents

これは、すべての親ビューモデルを表す配列です。

$ parents [0]は親コンテキストのビューモデルです（つまり、$ parentと同じです）

$ parents [1]は祖父母コンテキストのビューモデルです

$ parents [2]はgreat祖父母のコンテキストからのビューモデルです

… 等々。

$ root

これは、ルートコンテキスト、つまり最上位の親コンテキストのメインビューモデルオブジェクトです。通常、ko.applyBindingsに渡されたオブジェクトです。 $ parents [$ parents.length-1]と同等です。

128
Matt Burland

$parentContext.$parentを使用できます。

$parentContextは、（$data、$parent、$index、...）などの多くの便利なプロパティを提供します

7
Hassan Alhaj

次のように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>

詳細はこちら

0
cjohansson