过滤骨干集合时的内存泄漏

Question

我有一个过滤器正在处理我的骨干集合。在搜索框中键入搜索并列出实时过滤器。效果很好，至少我是这么认为的。当我在 chrome 中查看内存堆快照时，我可以看到每次搜索都会泄漏内存... 6 megs 8 megs... 不久堆快照就超过了 100 megs。

我已在下面的视图中隔离了问题。如果我在初始化函数中注释掉 this.listenTo，我似乎不再泄漏内存。

所以我的问题是如何保持这些事件侦听器和集合上的实时过滤而不会泄漏。

var View = Backbone.View.extend({

    tagName: 'tr',

    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
    },

    events: {
        'click .edit': 'edit',
        'click .delete': 'delete',
    },

    edit: function() { /* EDIT */ },

    delete: function() {
        this.model.destroy(); //backbone
    },

    render: function () {
        var template = _.template( ProductTemplate )
        this.$el.html( template({ this.model.toJSON() }) )
        return this;
    }

})


var ListView = Backbone.View.extend({

    initialize: function()
    {
        this.collection = new Collection( Products ) //products are bootstrapped on load
    },

    render: function (terms)
    {
        this.$el.html( ListTemplate );

        var filtered = Shop.products.collection.search(terms)

        _.each(filtered, this.addOne, this)

        //append list to table
        $('#products').html( this.el )

        return this
    },

    addOne: function (product)
    {
        this.$el.find('tbody').append(
            new View({ model: product }).render().el
        )

        return this
    },

});

var Collection = Backbone.Collection.extend({

    model: Model,

    search : function(letters){

        //set up a RegEx pattern
        var pattern = new RegExp(letters,"gi")

        //filter the collection
        return this.filter(function(model)
        {
            if(letters == "") return true //if search string is empty return true
            return pattern.test(model.attributes['Product']['name'])
        });
    }


});

已解决：

这是我的新搜索方法。我不再过滤集合并重新渲染。我只是遍历集合，如果一个模型与搜索匹配，我们触发一个“显示”事件，如果它不在搜索中，我们触发一个“隐藏”事件。然后我们在视图中订阅这些事件并采取相应的行动。

集合中的搜索功能： 搜索：函数（查询）{

    //set up a RegEx pattern
    var pattern = new RegExp(query,"gi")

    //filter the collection
    this.each(function(model){
      if ( pattern.test(model.attributes['Product']['name']) ){
        model.trigger('show')
      }
      else{
        model.trigger('hide')
      }
});
}

新观点： var ProductView = Backbone.View.extend({

    tagName: 'tr',

    initialize: function() {
        this.listenTo(this.model, 'show', this.show);
        this.listenTo(this.model, 'hide', this.hide);
    },

    hide: function()
    {
      this.$el.addClass('hide')
    },

    show: function()
    {
      this.$el.removeClass('hide')
    },

    render: function ()
    {
        var template = _.template( ProductTemplate )
        this.$el.html( template( {data: this.model.toJSON(), Utils: Shop.utils} ) )
        return this;
    }

});

Answer 1

要扩展 @mu 已经评论过的内容，您并没有删除您创建的视图。它们不在 DOM 中，但它们仍然在内存中徘徊，因为它们引用了您的模型（因此，垃圾收集器不会为您删除它们）。

你有几个选择：

1. 跟踪由addOne 实例化的所有视图，并在每次调用render 时将其删除。
2. 让您的代码在每次更改过滤条件时都显示/隐藏视图，而不是实例化/销毁。这是更多的工作，但肯定是更优化的解决方案。