刪除了骨干視圖DOM元素

Question

我一直在閱讀Backbone.js僵屍（或內存泄漏）問題。 基本上，當您不再需要它以確保所有事件都被刪除時，您必須解除綁定並從DOM中刪除該元素。

現在，我有一個帶有幾個容器的單頁應用程序：

<div id="page1"></div>
<div id="page2"></div>

並將我的underscore.js模板添加到這些占位符。 我每頁有一個模型，如：

HomeView = Backbone.View.extend({
  el: '#page1'
)}

現在，當我點擊該頁面上的一個元素時，我導航到另一個Backbone.js視圖：

clicked: function(ev){
  $(this.el).remove(); // <-- this is the problem
  $(this.el).unbind();
  App.navigate('page/2', true);
}

這工作正常但是...我從DOM中刪除了page1元素，所以當我使用后退按鈕轉到上一頁時，我的元素消失了，沒有任何內容可以附加HTML。

我可能不明白如何將Backbone.js視圖與DOM鏈接...我應該保持元素存在內存泄漏的風險嗎？

謝謝！

Answer 1

關於丟失頁面中的page1元素，因此無法使用HTML填充項目，我執行了以下操作。

而不是使用：

this.remove();

...完全刪除元素，然后嘗試弄清楚如何添加它，我使用jQuery：

$(this).empty;

這會清空所有子元素，文本，數據和事件處理程序。 更多信息請訪問： http ： //api.jquery.com/empty/

事實上，我使用以下所有內容，這可能有點矯枉過正，但我們會看到：

this.undelegateEvents();
$(this).empty;
this.unbind();

希望這很有用！

Answer 2

正如文章所說，（是的，我之前在我自己的項目中嘗試過他的方法），你必須找到一種方法來刪除視圖的DOM元素並取消綁定事件。 但是，有兩種類型的事件，1）Backbone事件，2）使用jQuery綁定到DOM元素的事件。

而不是你的：

$(this.el).remove();
$(this.el).unbind();

做這個：

this.remove();
this.unbind();

您現在也正在刪除Backbone事件; 並且在this.remove上的this.remove將調用$(this.el).remove(); 。

但是，這只是如何刪除視圖而不是留下僵屍。 你應該考慮他的方法來顯示一個視圖，使這個過程更自動化。 這一切都在他的文章中。

Answer 3

骨干開發版本（master）現在公開_removeElement（）

 remove: function() {
      this._removeElement();
      this.stopListening();
      return this;
    },

從文檔和附加到它的所有事件偵聽器中刪除此視圖的元素。 使用備用DOM操作API暴露給子類。

_removeElement: function() {
      this.$el.remove();
    },