骨幹刪除視圖刪除el

我正在創建一個單頁面應用程序，而我對骨幹網來說是相當新的。我有一個使用相同的wrapper-div創建多個視圖的問題。骨幹刪除視圖刪除el

我的設置：

我添加了一個貼心的功能各方意見：

Backbone.View.prototype.close = function(){ 
    this.remove(); 
    this.off(); 
    if (this.onClose){ 
     this.onClose(); 
    } 
}

我有一個包裝-DIV，我想呈現的觀點，將其刪除並呈現新的。所以我setupView函數看起來像這樣：

app.SetupView = Backbone.View.extend({ 
    el: '#my_view_wrapper', 
    ... 
});

從我交換意見我關閉功能的電流（開放）查看這樣的：

var v = this.model.get('view'); 
v.close();

問題

我的問題是，我有多個視圖使用相同的wrapper-div。但是當我關閉一個視圖時，這個wrapper-div似乎被刪除了，我試圖創建的下一個視圖找不到這個div。

我想有一個簡單的解決方案？我想重複使用相同的包裝器，只刪除它裏面的視圖，而不是包裝器本身。

2012-12-29 swenedo

'remove'從DOM中刪除元素。但我想我誤解了'el'。我認爲這只是新元素被注入的地方，但現在已經知道它成爲新元素的一部分，因此當我調用'remove'時它被刪除。 – swenedo

對。你最好讓每個視圖管理自己的'el'：視圖應該創建它的'el'，對它做些事情，並在刪除視圖時將其刪除。調用者將視圖的「el」放入調用者控制的容器中。不爲多個視圖重用DOM元素可以幫助您避免很多問題。 –

@ muistooshort - 很好的建議。從來沒有想過這個 - 非常有意義。謝謝。 – cheshireoctopus

在您的方案中，不要使用現有的DOM元素作爲「el」值。骨幹將爲您創建元素。當您實例化視圖時，您可以執行以下操作將其附加到現有的包裝元素上。

$(viewName.render().el).appendTo('#my_view_wrapper');

2012-12-29 17:24:23 Matt

謝謝，這解決了我的問題！ – swenedo

，正如加法（供以後參考）：另一種選擇是覆蓋子視圖remove所以，它只是清空$el而不是取消它。例如。

remove: function() { 
     this.$el.empty().off(); /* off to unbind the events */ 
     this.stopListening(); 
     return this; 
}

我個人更喜歡這個，因爲它不需要插入沒有真正用途的包裝元素。

2013-09-25 11:22:49 Marcus

我同意。這個方法應該被構建到Backbone中，根據是否聲明一個'el'，在'empty'和'remove'之間切換。 –

我還會添加'this。$ el.empty（）。off（）'以確保關閉所有事件。 –

作爲參考，Backbone的實現是[here]（http://backbonejs.org/docs/backbone.html#section-158）。 –

回答