3

我有一个过滤器正在处理我的骨干集合。在搜索框中键入搜索并列出实时过滤器。效果很好，至少我是这么认为的。当我查看 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;
    }

});
4

1 回答 1

4

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

你有几个选择：

  1. 跟踪所有正在实例化的视图，并在addOne每次render调用时删除它们。
  2. 每次更改过滤条件时，让您的代码显示/隐藏视图而不是实例化/销毁。这是更多的工作，但肯定是更优化的解决方案。
于 2013-01-20T05:31:50.127 回答