javascript - 主干可重用 View (将新模型设置为现有 View )

Question

以下设置的最佳方法是什么:项目的长列表(数百人)，单击列表条目后会打开一个包含项目详细信息的新对话框。

有多个选项(另请参阅 here ):

1. 使用“虚拟”模型和一个 View 并更改虚拟模型的属性 -> 不反射(reflect)对原始模型的更改
2. 更改一个现有 View 的模型
3. 每次点击列表时都会创建一个新 View ，这会导致模型 -> 性能问题吗？
4. 使用marionette框架 -> 文档很少，这让我很难理解
5. 使用JSPerf查看 -> 我尝试了在线演示，但在快速滚动时出现了几个错误

我尝试了选项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可以创建大量模型并通过单一 View 向用户展示。输入要创建的模型数量，然后单击“创建模型”。

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

对于内存分配，我使用了 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();
}   

整体 View 保持不变，所有 subview 都发生了变化。

你可以在这里找到 fiddle http://jsfiddle.net/stot/H4qPG/20/我创建了 1.000.000 个模型，根据 chrome 任务管理器，内存消耗在测试的很长一段时间内保持稳定。

有用信息:

• Destroy or remove a view in Backbone.js
• http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/