我在用着jquery-ui 选项卡 http://jqueryui.com/tabs/我遇到了删除选项卡时出现的问题。该选项卡及其内容 div 似乎已被删除，但当您查看 Chrome DevTools 配置文件中的堆时（删除选项卡后），您会发现选项卡 li 和 div 元素仍然存在，但已分离。随着时间的推移，重复添加/删除选项卡会导致这些元素累积。例如，如果添加一个选项卡 10 次，则堆快照中将显示 10 个分离的 div 元素和 10 个分离的 li 元素：
我有以下看法：
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"
});
视图的实例化如下：
tabs = new TabsCollection(); // Create a new collection instance
var tabLabelView = new TabLabels({
itemView: TabLabel,
collection: tabs
});
var tabContainerView = new TabContainers({
itemView: TabContainer,
collection: tabs
});
正如您所看到的，这些视图都引用同一个集合；集合中的每个模型可以说代表一个选项卡（恰好该模型包含满足 jquery-ui 选项卡的必要信息）。视图通过 Marionette.Layout 显示在一个区域中......非常标准。添加选项卡是通过单击选项卡容器中的链接来完成的；这一切所做的就是向集合中添加另一个模型，然后在主容器上调用 tabs("refresh")，这使得新选项卡出现。通过单击选项卡右上角的“X”图标即可删除选项卡。
我花了很多时间试图追踪这个泄漏，但我无法弄清楚这是否是我的代码中的问题（也许是我关闭视图/模型/等的方式？）或者是否是我的代码中的问题jquery-ui 选项卡插件。
想法？提前致谢！
更新#1根据要求，这里有一个jsfiddle http://jsfiddle.net/dBmAe/30/演示问题——只需关闭选项卡，您就会看到分离的元素被留下。
另外，截图：
更新#2这似乎是 jquery-ui 选项卡小部件中的泄漏。同样的行为发生在小部件演示 http://jqueryui.com/tabs/#manipulation在 jquery-ui 网站上。我添加了几个选项卡，然后将其关闭，果然，它们仍然存在：
我已经使用最新（在撰写本文时）版本的 jQuery UI (1.10.3) 和以前的版本 (1.10.2) 对此进行了测试。
