Question

以下设置的最佳方法是：如果项目（数百人）列出一个长列表，单击列表条目后会打开一个包含项目详细信息的新对话框。

有几种选择（另见here）：

使用“虚拟”模型和一个视图并更改虚拟模型的属性 - ＆gt;不反映对原始模型的更改
更改一个已存在的视图的模型
每次点击列表时，都会创建一个新视图，其中模型 - ＆gt;绩效问题？
使用marionette框架 - ＆gt;很少有文档让我很难理解
使用JSPerf查看 - ＆gt;我尝试了在线演示，但在快速滚动时有几个错误

我尝试了选项2，但似乎有内存泄漏。

ReusableView = Backbone.View.extend({
    setModel: function( model) {
        // unbind all events
        this.model.stopListening();        
        this.undelegateEvents();

        // set new model
        this.model = model;
        this.delegateEvents({
            "click": "onClicked",
            "mouseover": "onMouseOver"
        });
        this.initialize();
    }          
});

这是一个fiddle，可以使用单个视图向用户显示许多模型。键入要创建的模型数，然后单击“创建模型”。

问题：为什么会出现内存泄漏？使用模型后如何正确清理？

对于内存分配，我使用了chrome及其任务管理器。 70000次观看的内存消耗约为30M。

Answer 1

这是我在阅读和测试后想出的解决方案：

setModel: function( model) {
    // unbind all view related things
    this.$el.children().removeData().unbind();
    this.$el.children().remove();
    this.stopListening();

    // clear model
    if ( this.model) {
        this.model.unbind();
        this.model.stopListening();        
    }

    // set new model and call initialize
    this.model = model;
    this.delegateEvents( this.events);    // will call undelegateEvents internally      
    this.initialize();
}

整体观点保持不变，所有儿童都改变了。

你可以在这里找到小提琴http://jsfiddle.net/stot/H4qPG/20/ 我创建了1.000.000模型，并且根据chrome任务管理器，在此测试的时间内，内存消耗是稳定的。

有用的信息：

骨干可重用视图（将新模型设置为现有视图）

1 个答案: