Ich benutzejquery-ui Tabs und ich habe ein Problem, das auftritt, wenn eine Registerkarte entfernt wurde. Die Registerkarte scheint zusammen mit dem Inhalt div entfernt zu sein. Wenn Sie sich jedoch den Heap in Chrome DevTools-Profilen ansehen (nachdem eine Registerkarte entfernt wurde), werden Sie feststellen, dass die Elemente li und div auf der Registerkarte noch vorhanden, aber nicht verbunden sind . Das wiederholte Hinzufügen / Entfernen von Tabs führt mit der Zeit dazu, dass sich diese Elemente ansammeln. Wenn Sie beispielsweise zehnmal einen Tabulator hinzufügen, werden im Heap-Snapshot zehn getrennte div-Elemente und zehn getrennte li-Elemente angezeigt:

Ich habe folgende Ansichten:

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"
});

Die Ansichten werden folgendermaßen instanziiert:

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

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

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

Wie Sie sehen, beziehen sich beide Ansichten auf dieselbe Sammlung. Man kann sagen, dass jedes Modell in der Sammlung einen einzelnen Tab repräsentiert (es kommt nur so vor, dass das Modell die notwendigen Informationen enthält, um jquery-ui-Tabs zu erfüllen). Die Ansichten werden in einer Region über Marionette.Layout angezeigt ... ziemlich normal. Das Hinzufügen eines Tabs erfolgt durch Klicken auf einen Link im Tab-Container. Dies fügt der Sammlung lediglich ein weiteres Modell hinzu und ruft dann im Hauptcontainer Registerkarten auf ("Aktualisieren"), wodurch die neue Registerkarte angezeigt wird. Das Entfernen einer Registerkarte erfolgt durch Klicken auf ein "X" -Symbol in der oberen rechten Ecke der Registerkarte.

Ich habe viel Zeit damit verbracht, dieses Leck aufzuspüren, und ich kann nicht herausfinden, ob es ein Problem in meinem Code ist (wie ich Ansichten / Modelle / etc. Schließe?) Oder ob es ein Problem in ist das jquery-ui tabs plugin.

Gedanken? Danke im Voraus!

Update Nr. 1 Hier ist wie gewünscht einjsfiddle Demonstration des Problems - schließen Sie einfach die Registerkarten und Sie werden sehen, dass abgelöste Elemente zurückbleiben.

Auch ein Screenshot:

Update Nr. 2 Dies scheint ein Leck im Widget "jquery-ui tabs" zu sein. Das gleiche Verhalten tritt in derWidget-Demonstration auf der jquery-ui website. Ich habe ein paar Tabs hinzugefügt und sie dann geschlossen, und sie bestanden tatsächlich darauf:

Ich habe dies mit der neuesten (zum Zeitpunkt dieses Schreibens) Version von jQuery UI (1.10.3) und der vorherigen Version (1.10.2) getestet.