javascript - tablas - innerhtml

Parece que no puede limpiar elementos DOM separados

Question

Estoy usando pestañas jquery-ui y tengo un problema que ocurre cuando una pestaña ha sido eliminada. Parece que se eliminó la pestaña, junto con su div de contenido, pero cuando echas un vistazo al montón en Chrome DevTools Profiles (después de que se haya eliminado una pestaña) verás que los elementos tab li y div todavía están presentes, pero están separados . Con el tiempo, la adición / eliminación repetida de pestañas hace que estos elementos se acumulen. Por ejemplo, si agrega una pestaña 10 veces, habrá 10 elementos div separados y 10 elementos li independientes que aparecerán en la instantánea del montón:

Tengo las siguientes vistas:

TabLabel = Marionette.ItemView.extend({
    template: "#tab-label",
    tagName: "li",
    events: {
        "click .ui-icon-close": "closeTab"
    },  
    closeTab: function(e) {
        this.$el.contents().remove();
        this.model.collection.remove(this.model);
        $("#main-container").tabs("refresh");
        this.close();
    }   
}); 

TabContainer = Marionette.ItemView.extend({
    template: "#tab-container",
    tagName: "div",
    onBeforeRender: function() {
        this.$el.attr("id", "div-" + this.id);
    },  
    onClose: function() {
        // This removes the region that contains the container
        App.layout.removeRegion(this.containerRegion);
    }   
});

TabLabels = Marionette.CollectionView.extend({
    tagName: "ul"
});

TabContainers = Marionette.CollectionView.extend({
    tagName: "div"
});

Las vistas se instancian así:

tabs = new TabsCollection(); // Create a new collection instance

var tabLabelView = new TabLabels({
    itemView: TabLabel,
    collection: tabs
}); 

var tabContainerView = new TabContainers({
    itemView: TabContainer,
    collection: tabs
}); 

Como puede ver, las vistas se refieren a la misma colección; Se puede decir que cada modelo de la colección representa una sola pestaña (simplemente sucede que el modelo contiene la información necesaria para satisfacer las pestañas de jquery-ui). Las vistas se muestran en una región a través de Marionette.Layout ... bastante estándar. Agregar una pestaña se logra haciendo clic en un enlace en el contenedor de pestañas; todo lo que hace es agregar otro modelo a la colección y luego llama a las pestañas ("actualizar") en el contenedor principal, lo que hace que aparezca la nueva pestaña. Para eliminar una pestaña, haga clic en el ícono "X" en la esquina superior derecha de la pestaña.

He pasado mucho tiempo tratando de rastrear esta fuga y no puedo averiguar si es un problema en mi código (la forma en que estoy cerrando vistas / modelos / etc., tal vez?) O si es un problema en el plugin de pestañas jquery-ui.

¿Pensamientos? ¡Gracias por adelantado!

Actualización # 1 Como se solicitó, aquí hay un jsfiddle que demuestra el problema: simplemente cierre las pestañas y verá que los elementos separados se quedan atrás.

Además, una captura de pantalla:

Actualización # 2 Esto parece ser una fuga en el widget de pestañas jquery-ui. El mismo comportamiento ocurre en la demostración del widget en el sitio web de jquery-ui. Agregué algunas pestañas y luego las cerré y, efectivamente, persistieron:

He probado esto con la última versión (en el momento de escribir esto) de jQuery UI (1.10.3) y la versión anterior (1.10.2).

Answer 1

¿Hay alguna razón por la que use this.$el.contents().remove() lugar de this.$el.empty() ?

Usar this.$el.empty() en ese jsFiddle tuyo parecía remediar el NodeList separado.

Algunas notas de perfil de memoria:

• mira http://www.youtube.com/watch?v=L3ugr9BJqIs
• Use el método de 3 instantáneas, 2 no es suficiente. Qué significa eso?
  • Comienza el modo incógnito fresco y actualizado
  • Tomar instantáneas (el GC forzado ocurrirá cada vez que tome una instantánea)
  • Haz algo, toma una instantánea (gc)
  • Haz algo similar, toma una instantánea (gc)
  • Compare la instantánea 2 con la instantánea 1, encuentre los deltas con +
  • Elija Resumen y Objetos asignados entre las instantáneas 1 y 2 para la instantánea 3
  • Busca cosas que encuentres comparando 2 y 1 que no deberían estar allí. Estos son los puerros

He encontrado casos en los que jQuery parece escaso porque guardan el objeto jQuery actual en .prevObject al realizar algunas operaciones, como llamar a .add() . Tal vez esa llamada a .contents() haga algo de magia funky.

Answer 2

Así que finalmente arreglé este problema (hace bastante tiempo) al hacer dos cosas:

1. Abandonar jQueryUI a favor de Bootstrap

2. Cambiar la función closeTab (ver el jsFiddle original) a lo siguiente:

   closeTab: function (e) {
       e.stopPropagation();
       e.preventDefault();
       this.model.collection.remove(this.model);
       this.close();
   }

En ese fragmento, stopPropagation y preventDefault son realmente lo que impidió a este elemento permanecer separado (y acumular en las siguientes adiciones / eliminaciones) en el DOM. Para resumir: este problema se creó al no llamar a stopPropagation / preventDefault en el objeto de evento después de que se desencadenó. He actualizado jsFiddle para que elimine correctamente los elementos de la pestaña y para la posteridad, aquí hay una captura de pantalla del resultado:

Como puede ver, ninguno de los elementos de pestaña permanece separado después de hacer clic en la "X" para cerrarlos. Los únicos elementos separados son los que provienen de la interfaz de jsFiddle.