2012-07-31 81 views
3

我們已經使用Backbone幾個月,但我們認爲在共享具有可見視圖的模型時必須有更好的方式處理隱藏視圖。例如,我們有一個「視圖段」視圖和一個「編輯段」視圖,兩者都代表「段」模型。其中一個總是隱藏在任何給定的時刻,但是,仍然在聽同樣的事件(包括ajax調用)。我們隱藏視圖vs替換的原因在於,我們希望儘量減少視圖之間的加載時間,因爲視圖顯示大量的數據和dom元素。我們認爲隱藏的視圖不需要渲染,直到可見。管理與可見視圖共享同一模型的隱藏骨幹視圖

是否有適當的(最佳實踐)方法來處理這種情況?你將如何處理這個問題?是否有一種簡單的方法來臨時禁用整個視圖的事件監聽?

+0

更新:我應該澄清,我也想關閉由模型更改觸發的事件的監聽。 – soultrust 2012-08-01 08:33:07

回答

1

一個簡單的想法: 我想你可以使用delegateEvents Backbone.Viewt提供,當你想要顯示活動的EditSegment第一次使用undelegateEvents動態消除ViewSegment,則delegateEvents undelegateEvents方法動態設置活動動態初始化EditSegment Events。

編輯-20120801:約model.unbind

bindTo: function(model, ev, callback) { 
     model.bind(ev, callback, this); 
     this.bindings.push({ 
      model: model, 
      ev: ev, 
      callback: callback 
     }); 
    }, 

    _unbindFromAll: function() { 
     _.each(this.bindings, function(binding) { 
      binding.model.unbind(binding.ev, binding.callback); 
     }); 
     this.bindings = []; 
    }, 
+0

(un)delegateEvents只關閉偵聽您在視圖的'events'對象中定義的事件的事件。我想關閉模型更改的聆聽。 – soultrust 2012-08-01 08:30:27

+0

@TomoSuzuki嗨,看到我的更新,可以實現對您的要求的適當更改。 – 2012-08-01 13:47:18

3

我的意見總是聽模式的轉變時,當模型改變我呈現它。我想對你來說也是一樣,所以當一個模型被提取(你的意思是ajax調用)時,你不需要任何東西。在渲染(並在模式改變你的聽力方法),你可以驗證是否可見:

render : function(){ 
    if(!this.$el.is(":visible")){ 
    //skipping any render action because our view is hidden 
    return this; 
    } 
} 

而且還宣稱事件只是工作,如果你的觀點的主要元素是可見的,只需添加在選擇的前綴:在您的任何子選擇器之前可見:

"click :visible .button" : "buttonClickHandler" 
6

我們使用與顯示和編輯視圖完全相同的場景。我們已將所有模型綁定邏輯收集到bindEvents方法中,並使用unbindEvents方法對其進行了補充。

hide -method視圖,我們稱之爲unbindEvents並在show方法我們稱之爲bindEvents。就那麼簡單。我們還在initialize方法中調用bindEvents,在remove方法中調用unbindEvents以避免殭屍視圖。

我們不關心JavaScript事件,因爲它們通常沒有得到上隱藏視圖解僱(大部分ARE點擊或更改驅動)

順便說一句,以避免渲染一堆的HTML即會從不顯示,我們推遲視圖的第一次渲染,直到第一次顯示,所以在show方法中,我們測試this.isRendered(布爾值,默認爲false),如果未設置,我們在顯示視圖之前渲染視圖並設置它爲真。