javascript - 从内存中删除旧模型

Question

我创建了一个简单的例子 http://jsfiddle.net/n7tntcb5/

$ (function () {
'use strict';

var ButtonView = Backbone.View.extend ({
    tagName : 'button',

    events : {
        'click' : 'onClick'
    },

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

    render : function () {
        this.$el.html ('Click');
        return this;
    },

    onClick : function (event) {
        this.collection.reset ([
            { "id" : _.random (0, 1000), data : new Array (100000).join ('a') },
            { "id" : _.random (0, 1000), data : new Array (100000).join ('a') },
            { "id" : _.random (0, 1000), data : new Array (100000).join ('a') }
        ]);
    }
});

var ListView = Backbone.View.extend ({
    tagName : 'ul',

    initialize : function (options) {
        options || (options = {});

        this.views = [];
        this.collection = options.collection;

        this.listenTo (this.collection, 'reset', this.render);
    },

    empty : function () {
        _.each (this.views, function (view) {
            view.remove ();
        });

        this.$el.empty ();
    },

    render : function () {
        this.empty ();

        this.collection.each (function (model) {
            var view = new ListItemView ({ model : model });
            this.views.push (view);
            this.$el.append (view.render ().el);
        }, this);

        return this;
    }
});

var ListItemView = Backbone.View.extend ({
    tagName : 'li',

    initialize : function (options) {
        options || (options = {});

        this.model = options.model;
        this.collection = options.collection;

        this.listenTo (this.model, 'change', this.render);
    },

    render : function () {
        this.$el.html (this.model.get ('id'));
        return this;
    },

    remove : function () {
        if (this.model) {
            //this.model.clear ();
            delete this.model;
        }
    }
});

var Model = Backbone.Model.extend ({
    defaults : {
        id : null,
        name : '',
        data : ''
    }
});

var Collection = Backbone.Collection.extend ({
    model : Model,

    parse : function (response, options) {
        return response.models || response;
    }
});

var collection = new Collection ();
var list = new ListView ({ collection : collection });
var button = new ButtonView ({ collection : collection });

$ ('body')
    .append (list.render ().el)
    .append (button.render ().el);
});

在“Backbone Eye”Firefox 插件或 Chrome 的“Backbone Debugger”中，我看到模型的数量随着每次按钮的点击而不断增加。如何释放旧对象的内存？

Answer 1

您的 empty 函数不会清除所有内容。当然，您正在对 this.views 中的所有内容调用 remove，但您永远不会清空 views 数组。试试这个版本:

empty: function() {
    _.each(this.views, function(view) {
        console.log(view.cid)
        view.remove();
    });

    this.$el.empty();
}

并在单击按钮几次时观察控制台:http://jsfiddle.net/ambiguous/27b15fsr/

您的 ListView 以其 views 数组中不断增长的 ListItemView 引用数组结束，这些僵尸 View 将引用该集合这将引用模型。你需要堵住这个漏洞:

empty: function() {
    _.each(this.views, function(view) {
        view.remove();
    });
    this.$el.empty();
    this.views = [ ]; // <------
}

顺便说一句，您不需要在 View initialize 方法中执行此操作:

this.collection = options.collection;

Backbone 会自行处理；来自 fine manual :

constructor / initialize new View([options])

There are several special options that, if passed, will be attached directly to the view: model, collection, el, id, className, tagName, attributes and events.