Estoy usandojquery-ui Tabs y estoy teniendo un problema que ocurre cuando una pestaña ha sido eliminada. La pestaña parece ser eliminada, junto con su div de contenido, pero cuando eche un vistazo al montón en Chrome DevTools Profiles (después de que se haya eliminado una pestaña) verá que la pestaña li y los elementos div todavía están presentes, pero 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 separados que se mostrará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 (solo 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. La adición de una pestaña se realiza 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 llamar 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 entender si es un problema en mi código (la forma en que estoy cerrando vistas / modelos / etc. ¿Quizás?) O si es un problema en El plugin jquery-ui tabs.

¿Pensamientos? ¡Gracias por adelantado!

Actualización # 1 Según lo solicitado, aquí hay unjsfiddle demostrando 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 eldemostració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 este artículo) de la interfaz de usuario jQuery (1.10.3) y la versión anterior (1.10.2).