Acceda a $ parent's $ parent en la vista eliminatoria - contexto de anidación

80

Actualizado por brevedad

¿Cómo puedo hacer referencia al $ parent de $ parent en el foreach / anidado de Knockout con enlaces?

Ejemplo -

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

Perdón por la pregunta confusa, pero estoy tratando de alcanzar el valor de un padre de segundo nivel para compararlo con un valor en el contexto actual (como a continuación) para mostrar solo un intervalo si coincide con el valor de $ parent's $ parent (¡uf!)

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

Sería más fácil hacerlo de esta manera, pero por lo que he leído, esto no es posible o lo estoy haciendo mal :)

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

Cualquier ayuda será muy apreciada.

PW Kad
fuente
No entiendo tu pregunta, ¿qué no funciona? ¿Cuál es su problema: es la sintaxis de $parent.$parento la que debe usar spanporque no puede fusionar el foreachy el if?
nemesv

Respuestas:

136

Usa la $parentsmatriz, el abuelo sería $parents[1]. También puede usar $rootsi el grandParentobjeto en su ejemplo es el padre superior.

De los documentos :

$ padres

Esta es una matriz que representa todos los modelos de vista principal:

$ parent [0] es el modelo de vista del contexto principal (es decir, es lo mismo que $ parent)

$ padres [1] es el modelo de vista del contexto de los abuelos

$ padres [2] es el modelo de vista del contexto de los bisabuelos.

… y así.

$ raíz

Este es el objeto del modelo de vista principal en el contexto raíz, es decir, el contexto principal superior. Por lo general, es el objeto que se pasó a ko.applyBindings. Es equivalente a $ parent [$ parent.length - 1].

Matt Burland
fuente
Por alguna razón $parent.$parentno funcionó para mí, sin embargo, esta solución funcionó bien, ¡y también es más corta!
PeterM
8

Puede utilizar $parentContext.$parent.

$parentContextproporcionar muchas propiedades útiles, tales como ( $data, $parent, $index, ...)

Hassan Alhaj
fuente
0

Creo que sería más fácil usar la configuración noChildContext de esta manera:

Usar "como" sin crear un contexto secundario

El comportamiento predeterminado de la opción as es agregar un nombre para el elemento actual y, al mismo tiempo, vincular el contenido al elemento. Pero es posible que prefiera mantener el contexto sin cambios y solo establecer el nombre del elemento actual. Este último comportamiento probablemente será el predeterminado en una versión futura de Knockout. Para activarlo para un enlace específico, establezca la opción noChildContext en true. Cuando esta opción se usa junto con as, todo acceso a los elementos de la matriz debe ser a través del nombre dado, y $ data permanecerá configurado en el modelo de vista externo. Por ejemplo:

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

Leer más aquí

cjohansson
fuente