Usando KnockoutJS con nodos separados

Lo que estoy buscando hacer es separar algunos nodos usando el método de separación de jQuery, actualizar mi ViewModel, adjuntar mis nodos nuevamente y actualizar los valores.

¿Es esto posible?

Aquí hay una violín completo de lo que estoy buscando. Básicamente, me gustaría poder ir de izquierda a derecha, hacer clic en separar, actualizar y adjuntar y tener valores nuevos en los cuadros de texto.

ACTUALIZACIÓN

Según la respuesta de RP, la mejor apuesta, suponiendo que esto se ajuste a su caso de uso, es adjuntarlos al dom oculto, actualice su modelo de vista y luego muestre sus nodos. Algo como esto funciona para mí:

$("#updateAndAttach").click(function () {
    var junk = $("<div />").css("display", "none");
    junk.append(nodes);
    $("#home").append(junk);

    vm.a("AAA");
    vm.b("BBB");

    $(nodes).unwrap();
});

ACTUALIZACIÓN FINAL

Aquí está el código completo:

JavaScript

$(function () {

    function ViewModel() {
        this.a = ko.observable("a");
        this.b = ko.observable("b");
    }

    var vm = new ViewModel();

    ko.applyBindings(vm, document.getElementById("home"));

    var nodes = null;

    $("#detach").click(function () {
        nodes = $("#home").children().detach();
    });

    $("#attach").click(function () {
        $("#home").append(nodes);
    });

    $("#update").click(function () {
        vm.a("AAA");
        vm.b("BBB");
    });
})();

HTML:

<div id="home">
    <input type="text" data-bind="value: a" />
    <input type="text" data-bind="value: b" />
</div>

<button id="detach">Detach</button>
<button id="update">Update</button>
<button id="attach">Attach</button>

preguntado el 03 de mayo de 12 a las 18:05

3 Respuestas

La evaluación de las fijaciones en un único data-bind están envueltos en un observable computado que se deshará de sí mismo cuando se vuelva a evaluar y reconozca que no es parte del documento actual.

Por lo tanto, no existe una solución simple que le permita hacer lo que está intentando. Sin duda, podría ocultar los elementos mientras se realizan las actualizaciones y luego mostrarlos.

contestado el 03 de mayo de 12 a las 19:05

Gracias. Para mí, la solución es simple: solo necesito actualizar justo antes de volver a adjuntar, por lo que mi edición anterior lo hace de manera bastante simple y agradable. - Adán Rackis

Lo que sucede aquí es que cuando llama al método de separación, ko pierde los enlaces a los nodos separados. La forma más fácil de hacer que funcione es volver a aplicar enlaces cada vez que separa y adjunta nodos.

Vea este jsfiddle: http://jsfiddle.net/EZFDt/

Editar: con esa solución alternativa, tenga en cuenta que puede haber implicaciones de rendimiento. Tal vez pueda volver a pensar en la forma en que aborda el problema: ¿puede mover los nodos a una ubicación oculta diferente en lugar de separarlos? ¿Puedes simplemente ocultarlos?

contestado el 03 de mayo de 12 a las 19:05

Gracias por la respuesta, pero creo que hay problemas al volver a aplicar enlaces varias veces. stackoverflow.com/a/8284095/352552 - Adán Rackis

Correcto. Sin embargo, el método applyBindings acepta un parámetro de nodo, que aplica enlaces solo a ese nodo. - MK_Dev

¡Cierto! Si está insertando nuevos nodos dom, eso puede ser útil. Solo estaba buscando actualizar mi VM mientras los nodos están desconectados. +1 - Adán Rackis

Debería tener mucho cuidado al volver a aplicar enlaces a elementos existentes. En este caso, la única razón por la que se eliminan los enlaces es porque los observables de los que dependen están actualizados. Dependiendo del caso de uso, esto puede o no ser cierto. Siempre es mejor evitar aplicar enlaces varias veces para evitar manipuladores adicionales. Aquí hay una muestra que muestra que los controladores de eventos aún persistirían en este escenario: jsfiddle.net/rniemeyer/LS72r/1. Después de desconectar, actualizar, volver a conectar y volver a aplicar, el clic del botón se manejará dos veces. - RP Niemeyer

Ha pasado un tiempo desde que hiciste la pregunta, pero encontré usando despegar, luego inmediatamente anexar a alguna ubicación válida en el DOM mantiene todos los enlaces funcionando bien. Entonces puedes separar, adjuntar a donde lo necesite a medida que su aplicación cambia de estado.

Lo uso para secciones con múltiples eventos adjuntos, como elementos JQUI, formularios y similares, de modo que puedo mantener una copia funcionando y simplemente agregarla al página Voy a. p.ej. a Regístrese forma, que también funciona como Editar Perfil.

En su caso, inicialmente agregándolo a un 'visibility:hidden;' nodo en algún punto que era claramente para elementos separados podría ser razonable.

don que tengas un buen dia

respondido 28 nov., 14:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.