Question

我正在使用Chrome开发工具中的分析器查看分离的DOM树，并且在测试下面的代码时我猜我发现了内存泄漏。工作流程如下：

加载页面
获取堆快照=＆gt;没有任何独立的dom树
点击过滤器事件，过滤集合并再次呈现表格
获取堆快照并与之前的快照进行比较=＆gt;有一棵独立的树

调试代码后，我发现问题出在以下一行

this.listenTo(this.model, "clearView", this.remove); //Line with problem

如果我删除了这一行，那里没有独立的dom树，否则我就有了独立的dom树。我想要解开一些东西吗？任何帮助都会受到欢迎。

感谢。

var Post = { Views: {} };

Post.Model = Backbone.Model.extend({

    initialize: function() {
    },

    destroyView: function() {
    }
});

Post.Collection = Backbone.Collection.extend({
    model: Post.Model,
    url: '/posts'
});

Post.Views.ModelView = Backbone.View.extend({
    tagName: 'tr',
    template:  APP.Templates.PostModel,

    initialize: function() {
        this.listenTo(this.model, "clearView", this.remove); //Line with problem
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    remove: function() {
        console.log("remove");
    }
});

Post.Views.CollectionView = Backbone.View.extend({
    template: APP.Templates.PostCollection,

    events : {
        "click .filter":"filter",
        "click .delete":"clear"
    },

    initialize: function() {
        this.toRenderModels = this.collection.models;
    },

    filter: function() {
        this.toRenderModels = null;
        this.toRenderModels = this.collection.where({title: 'Post 1'});
        this.render();
    },

    clear: function() {
        this.toDeleteModel = this.collection.at(0);
    },

    render: function() {
        this.$el.empty();
        this.$el.html(this.template());
        _.each(this.toRenderModels, function(model) {
            this.$('table').append(new Post.Views.ModelView({model: model}).render().el);
            }, this);
        this.toRenderModels = null; 
        return this;
    }
});

Answer 1

您标记为＆＃34的行与问题＆＃34;应放在View的构造函数中。

这里最重要的是调用remove方法删除元素并停止监听事件。

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
},

这是默认实现，您不必将其复制。

相关问题：Memory Leak when deleting items from DOM using backbone

骨干内存泄漏分离DOM

1 个答案: