骨幹可重複使用視圖（爲現有視圖設置新模型）

對於以下設置，最佳方法是什麼：如果項目（幾百人）和單擊列表項目後打開一個新對話框，會打開一個長列表並顯示項目詳細信息。骨幹可重複使用視圖（爲現有視圖設置新模型）

有幾個選項（見here）：

使用「虛擬」模型和一個視圖，並更改虛擬模型的屬性 - >不能反映更改原始模型
每次在列表中單擊一個新的視圖時，都會創建一個模型 - >性能問題？
使用marionette框架 - >很少有文檔，這使得它很難理解我
使用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進行大量的模型可以創建顯示與單一視圖的用戶。輸入要創建的模型數量，然後單擊創建模型。

問題：爲什麼有記憶液體？如何在使用模型後正確清理？

對於內存分配，我使用了chrome及其任務管理器。內存消耗大約30M，70000次瀏覽。

來源

2014-01-28 stot

您可以直接調用'this.delegateEvents（）'，它會在拉他們從你的活動哈希值。 – Andrew

這是我閱讀和測試後，很多想出解決辦法：

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任務管理器的內存消耗在本次測試的最終時間內保持穩定。

有用的信息：

來源

2014-01-29 18:51:47 stot

骨幹可重複使用視圖（爲現有視圖設置新模型）

回答

相關問題