Greifen Sie in der Knockout-Ansicht auf den $ parent von $ parent zu - Verschachtelungskontext

79

Der Kürze halber aktualisiert

Wie kann ich auf die $ Eltern $ Eltern in verschachtelten Knockout foreach / mit Bindungen verweisen?

Beispiel -

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

Entschuldigen Sie die verwirrende Frage, aber ich versuche, den Wert eines Elternteils der zweiten Ebene zu erreichen, um ihn mit einem Wert im aktuellen Kontext (wie unten) zu vergleichen und nur dann eine Spanne anzuzeigen, wenn er mit dem Wert eines $ Elternteils $ Eltern übereinstimmt (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 -->

Es wäre einfacher, es so zu machen, aber nach dem, was ich gelesen habe, ist dies nicht möglich oder ich mache es falsch :)

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

Jede Hilfe wäre sehr dankbar.

PW Kad
quelle
Ich verstehe Ihre Frage nicht, was funktioniert nicht? Was ist Ihr Problem: Ist die Syntax von $parent.$parentoder die Sie verwenden müssen, spanweil Sie das foreachund das nicht zusammenführen können if?
Nemesv

Antworten:

136

Verwenden Sie das $parentsArray, wäre der Großelternteil $parents[1]. Möglicherweise können Sie auch verwenden, $rootwenn das grandParentObjekt in Ihrem Beispiel das oberste übergeordnete Objekt ist.

Aus den Dokumenten :

$ Eltern

Dies ist ein Array, das alle übergeordneten Ansichtsmodelle darstellt:

$ parent [0] ist das Ansichtsmodell aus dem übergeordneten Kontext (dh es ist dasselbe wie $ parent).

$ parent [1] ist das Ansichtsmodell aus dem Kontext der Großeltern

$ parent [2] ist das Ansichtsmodell aus dem Kontext der Urgroßeltern

… und so weiter.

$ root

Dies ist das Hauptansichtsmodellobjekt im Stammkontext, dh der oberste übergeordnete Kontext. Es ist normalerweise das Objekt, das an ko.applyBindings übergeben wurde. Dies entspricht $ parent [$ parent.length - 1].

Matt Burland
quelle
Aus irgendeinem Grund $parent.$parenthat es bei mir nicht funktioniert, diese Lösung hat jedoch gut funktioniert und ist auch kürzer!
PeterM
8

Sie können verwenden $parentContext.$parent.

$parentContextbieten viele nützliche Eigenschaften wie ( $data, $parent, $index, ...)

Hassan Alhaj
quelle
0

Ich denke, es wäre einfacher, die Einstellung noChildContext wie folgt zu verwenden:

Verwenden von "as", ohne einen untergeordneten Kontext zu erstellen

Das Standardverhalten der Option as besteht darin, einen Namen für das aktuelle Element hinzuzufügen und gleichzeitig den Inhalt an das Element zu binden. Möglicherweise möchten Sie den Kontext jedoch unverändert lassen und nur den Namen des aktuellen Elements festlegen. Dieses letztere Verhalten wird wahrscheinlich die Standardeinstellung in einer zukünftigen Version von Knockout sein. Um es für eine bestimmte Bindung zu aktivieren, setzen Sie die Option noChildContext auf true. Wenn diese Option zusammen mit as verwendet wird, muss der gesamte Zugriff auf die Array-Elemente über den angegebenen Namen erfolgen, und $ data bleibt auf das äußere Ansichtsmodell festgelegt. Zum Beispiel:

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

Lesen Sie hier mehr

Cjohansson
quelle