Parece que não é possível limpar elementos DOM desanexados
estou a usarGuias jquery-ui e estou tendo um problema que ocorre quando uma guia foi removida. A guia parece ser removida, juntamente com seu conteúdo div, mas quando você observa o heap nos perfis do Chrome DevTools (depois que uma guia é removida), você verá que a guia li e os elementos div ainda estão presentes, mas estão desanexados . Com o tempo, a adição / remoção repetida de guias faz com que esses elementos se acumulem. Por exemplo, se você adicionar uma guia 10 vezes, haverá 10 elementos div separados e 10 elementos li desanexados exibidos no instantâneo de heap:
Eu tenho os seguintes pontos de vista:
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"
});
As visualizações são instanciadas da seguinte forma:
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 você pode ver, as visualizações se referem à mesma coleção; cada modelo na coleção pode ser dito para representar uma única aba (acontece que o modelo contém as informações necessárias para satisfazer as abas jquery-ui). As vistas são mostradas em uma região via Marionette.Layout ... bastante normal. Adicionar uma guia é feito clicando em um link no contêiner da guia; Tudo o que isso faz é adicionar outro modelo à coleção e, em seguida, chama as guias ("atualizar") no contêiner principal, o que faz a nova guia aparecer. Para remover uma guia, clique no ícone "X" no canto superior direito da guia.
Eu passei muito tempo tentando rastrear esse vazamento e não consigo descobrir se é um problema no meu código (a maneira como estou fechando visualizações / modelos / etc. Talvez?) Ou se é um problema em o plug-in de guias jquery-ui.
Pensamentos? Desde já, obrigado!
Atualização 1 Conforme solicitado, aqui está umjsfiddle demonstrando o problema - basta fechar as guias e você verá que os elementos destacados são deixados para trás.
Além disso, uma captura de tela:
Atualização 2 Isso parece ser um vazamento no widget de guias do jquery-ui. O mesmo comportamento ocorre nodemonstração de widget no site jquery-ui. Eu adicionei algumas abas e depois as fechei e, claro, elas persistiram:
Eu testei isso com a versão mais recente (no momento da redação deste texto) do jQuery UI (1.10.3) e da versão anterior (1.10.2).