javascript - ¿Desmantelamiento de la función de desmontaje del manipulador de encuadernación?

knockout.js

Question

Tengo un controlador de enlace nocaut que utiliza plupload para arrastrar y soltar y subidas de ajax.

Para usar el script plupload, creo una instancia de plupload que a su vez vincula los detectores de eventos a los elementos DOM.

Eso funciona bien

Sin embargo, tengo una lista de "carpetas" y cuando hago clic en una carpeta, aparece una lista de archivos en esa carpeta. Reutilizo los mismos elementos de DOM para esto vinculando documentos seleccionadosFolder () utilizando foreach.

El problema que tengo es que en mi controlador de enlace hago todas las cosas de plupload en la función init y dado que reutilizo los elementos DOM, obtienen múltiples manejadores de eventos ligados a ellos. Esto hace que los eventos de arrastrar y soltar se envíen a todos los controladores. Esto significa que si dejo caer un archivo en la lista de archivos representados, el evento de caída también se activará en todas las listas de archivos previamente procesadas.

Lo que estoy buscando es algún tipo de función de eliminación o limpieza en el controlador de enlace, por lo que puedo anular el registro de todos los eventos siempre que no se entregue una lista de archivos (¿es esa una palabra?).

Tal vez no podamos detectar la desintegración? ¿Cómo manejaría esto? Preferiría no tener una instancia global, ya que eso me impediría usar el enlace en múltiples lugares al mismo tiempo.

Perdón por no darte ningún código. Estoy en el cajero automático de mi teléfono celular.

¡Aclamaciones!

Answer 1

Creo que la solución provista aquí solo funcionará si Knockout es el que elimina el nodo DOM (es decir, cuando rejigs templates). Me costó hacerlo disparar bajo ciertas condiciones. Puede haber situaciones en las que necesite que se ejecute una devolución de llamada independientemente de cómo se eliminó su elemento; ya sea con Knockout o vía jQuery.html (), etc. (especialmente en una aplicación de una sola página).

Formulé un enfoque diferente para agregar tal gancho con un poco de ayuda de jQuery. Utilizando la API de eventos especiales (que se describen bien here ), puede agregar un método que se ejecute cuando se here un evento en particular de un nodo DOM (algo que ocurre durante el desmontaje).

Si está utilizando Knockout junto con jQuery, puede envolverlo en un enlace knockout para que se vea así:

ko.bindingHandlers.unload = {
    init: function (element, valueAccessor) {
        var eventName = ''your_unique_unLoad_event''; // Make sure this name does not collide
        if (!$.event.special[eventName]) {
            $.event.special[eventName] = {
                remove: function (o) {
                    o.data.onUnload()
                }
            };
        }
        $(element).on(eventName, { onUnload: valueAccessor()}, $.noop);
    }
};

Puede usar esto en cualquier elemento como este:

<div id="withViewModelMethod" data-bind="unload: aMethodOnMyViewModel" />
<div id="withInLineMethod" data-bind="unload: function() { /* ... */ }" />

Le debo créditos a esta publicación SO .

Answer 2

Puede registrar un controlador que se ejecutará siempre que KO elimine elementos (como cuando se vuelve a representar una plantilla). Parece que:

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).datepicker("destroy");
    });

Entonces, en su función "init" registraría una devolución de llamada de eliminación para el elemento que se está vinculando y tendría la oportunidad de ejecutar cualquier código de limpieza que le gustaría.