Dostęp do $ parent's $ parent w widoku knockout - kontekst zagnieżdżenia

80

Zaktualizowano dla zwięzłości

Jak mogę odwołać się do rodzica $ rodziców $ w zagnieżdżonych powiązaniach Knockout foreach / with?

Przykład -

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

Oryginalny

Przepraszam za mylące pytanie, ale próbuję dotrzeć do wartości rodzica drugiego poziomu, aby sprawdzić wartość w bieżącym kontekście (jak poniżej), aby pokazać zakres tylko wtedy, gdy pasuje do wartości rodzica $ rodzica (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 -->

Byłoby łatwiej to zrobić w ten sposób, ale z tego, co przeczytałem, nie jest to możliwe lub robię to źle :)

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

Każda pomoc byłaby bardzo mile widziana.

PW Kad
źródło
Nie rozumiem twojego pytania, co nie działa? Jaki jest twój problem: czy składnia $parent.$parentlub której musisz użyć, spanponieważ nie możesz scalić foreachi if?
nemesv

Odpowiedzi:

136

Użyj $parentstablicy, tak będzie dziadek $parents[1]. Możesz także użyć, $rootjeśli grandParentobiekt w twoim przykładzie jest najwyższym rodzicem.

Z dokumentów :

$ rodzice

To jest tablica reprezentująca wszystkie nadrzędne modele widoków:

$ rodzice [0] to model widoku z kontekstu nadrzędnego (tj. jest taki sam jak $ rodzic)

$ rodzice [1] to model widoku z kontekstu dziadków

$ rodzice [2] to model widoku z kontekstu pradziadków

… i tak dalej.

$ root

To jest główny obiekt modelu widoku w kontekście głównym, tj. Najwyższy kontekst nadrzędny. Zwykle jest to obiekt przekazany do ko.applyBindings. Jest odpowiednikiem $ parent [$ parents.length - 1].

Matt Burland
źródło
Z jakiegoś powodu $parent.$parentnie działało u mnie, to rozwiązanie jednak działało dobrze i jest też krótsze!
PeterM
8

Możesz użyć $parentContext.$parent.

$parentContextdostarczają wielu użytecznych właściwości, takie jak ( $data, $parent, $index, ...)

Hassan Alhaj
źródło
0

Myślę, że łatwiej byłoby użyć ustawienia noChildContext w następujący sposób:

Używanie „jako” bez tworzenia kontekstu potomnego

Domyślnym zachowaniem opcji as jest dodanie nazwy dla bieżącego elementu, jednocześnie wiążąc zawartość z elementem. Ale może wolisz pozostawić kontekst bez zmian i ustawić tylko nazwę bieżącego elementu. To drugie zachowanie będzie prawdopodobnie domyślnym w przyszłej wersji Knockout. Aby włączyć ją dla określonego powiązania, ustaw opcję noChildContext na true. Gdy ta opcja jest używana wraz z as, cały dostęp do elementów tablicy musi odbywać się za pośrednictwem podanej nazwy, a $ data pozostanie ustawiona na zewnętrzny model widoku. Na przykład:

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

Przeczytaj więcej tutaj

cjohansson
źródło