*更新-为一个视图*添加了一个示例代码
这个问题已经讨论过很多次了,我已经在这个话题上经历了很多的建议,但是我仍然没有任何运气。
我的应用程序是基于选项卡的,即用户在全局搜索框中搜索实体,并根据实体的选择生成视图/模型,并在新的tab.User下呈现视图,通过重复上述过程可以打开多个选项卡。
我面临的问题是每次打开一个新的选项卡时,我可以看到浏览器内存消耗增加了大约6MB(每个选项卡的数据获取和显示最大为60 MB )。
不仅如此,当我关闭一个选项卡时,我可以看到对该选项卡下的每个视图都调用了我的自定义关闭函数(复制到下面),但不知怎么的,浏览器内存并没有下降。对我来说,这意味着垃圾收集不能正常工作,或者视图/模型没有被正确清理。
任何帮助都将不胜感激。
define([
"hbs!modules/applications/templates/applications",
"vent"
],
function (tpl, vent) {
var View = Backbone.Marionette.ItemView.extend({
className: 'modApplications',
template: {
type: 'handlebars',
template: tpl
},
refresh: function(){
self.$('.body-of-table').css('visibility', 'hidden');
self.$('.application-panel .spinnerDiv').addClass('loading');
this.model.fetch().always(function(){
self.$('.application-panel .spinnerDiv').removeClass('loading');
});
},
initialize: function(){
this.model.on('change', this.render, this);
vent.bindTo(vent, 'updateApplications', this.refresh, this);
},
onShow: function(){
var self = this;
this.$el.on('click', '.action-refresh', function(e) {
self.refresh();
e.preventDefault();
});
},
close: function() {
_.each(this.bindings, function (binding) {
binding.model.unbind(binding.ev, binding.callback);
});
this.bindings = [];
this.unbind();
this.off();
this.model.off('change');
this.model.unbind('change', this.render, this);
this.remove();
delete this.$el;
delete this.el;
if(console) console.log("kill : view.applications");
}
});
return View;
});发布于 2013-05-16 15:43:48
发现了问题&解决办法。
问题是,对于所有的新选项卡,我都使用了一个全局Marionette.EventAggregator。这被用作选项卡中各个部分之间通信的一种手段。现在,当一个选项卡关闭时,main.js文件仍然保持对全局通风口的引用,因为其他选项卡仍在使用它。在这里,仍然持有对已关闭选项卡的引用,因此视图/模型没有gc‘’ed。
为了解决这个问题,我为每个选项卡创建了一个单独的通风口,并使用该通风口对象触发该选项卡中的任何事件。在选项卡关闭操作中,我将unbindAll事件并为即将关闭的通风口指定一个空引用。
希望这对将来的人有帮助。
https://stackoverflow.com/questions/16443594
复制相似问题