我是否必须删除backbone.js上未使用的视图

时间:2014-01-04 20:50:39

标签: javascript backbone.js memory-leaks backbone-views

var Home = Backbone.View.extend({
template: _.template($('#home-template').html()),

initialize: function (params) {
    this.collection = new BlogList();

    this.listenTo(this.collection, "add", this.renderBlog);
    this.listenTo(this.collection, "reset", this.render);
},

render: function () {
    this.$el.html(this.template({hasPrevious: this.collection.hasPrevious()}));

    this.collection.each(function(item) {
        this.renderBlog(item);
    }, this);

    return this;
},

renderBlog: function(item) {
    this.$('#blog-list-container').append((new BlogPreView({ model: item })).render().el);
},

BlogPreView是一个Backbone.View 新的BlogPreView被多次实例化。我是否需要删除旧的。

如何删除backbone.view以及如何在此具体示例中删除?

1 个答案:

答案 0 :(得分:1)

您应该在视图上调用remove以删除它们。这会从DOM中移除el并致电stopListening以撤消您已拨打的所有listenTo来电。如果还有其他事情要清理,那么你应该覆盖remove来清理这些"其他事情"然后调用标准remove

在您的情况下,您有子视图,因此您应该跟踪它们:

renderBlog: function(item) {
    var v = new BlogPreView({ model: item });
    this.previews.push(v); // Initialize this in `initialize` of course.
    this.$('#blog-list-container').append(v.render().el);
}

然后在重新渲染或删除之前清理它们:

removePreviews: function() {
    _(this.previews).invoke('remove');
    this.previews = [ ];
},
render: function() {
    this.removePreviews();
    // what you have now goes here...
},
remove: function() {
    this.removePreviews();
    return Backbone.View.prototype.remove.apply(this);
}

您通常可以在不调用remove的情况下离开,但是一旦发现确实需要它,将代码正确地改编为remove就会非常麻烦。但是,如果您一直致电remove,正确跟踪子视图,并根据需要覆盖remove,那么您将无法在以后进行令人不快的改造时陷入困境。