主幹：從元素中獲取視圖對象

假設我有一些項目要顯示在列表中。該列表具有將所有項目彙總爲項目視圖的視圖。現在我想處理項目視圖上的點擊事件，並將處理委託給列表視圖。主幹：從元素中獲取視圖對象

讓我們來看看一些示例代碼：

ItemView = Backbone.View.extend({ 
    className: 'item', 
    initialize: function() { 
     this.$el.data('backbone-view', this); 
    } 
});

注意，我附上視圖對象本身作爲根元素，其實質上產生用於視圖和元件的圓形基準狀況的性質。

ListView = Backbone.View.extend({ 
    initialize: function() { 
     // contains the item views 
     this.items = []; 

     // click event delegation 
     this.$el.click(_.bind(this._onClick, this)); 
    }, 

    addItem: function(v) { 
     if (!(v instanceof ItemView)) return; 

     this.items.push(v); 
     this.$el.append(v.el); 
    }, 

    _onClick: function(e) { 
     var el = $(e.target).closest('.item'), 
      view = el.data('backbone-view'); 

     // do something with the view 
    } 
});

這是一個非常普遍的模式，無論何時需要處理任何類型的列表視圖。

我通過在初始化時間在項目上設置的數據屬性在處理程序中獲取項目視圖。我需要獲取項目視圖，因爲處理click事件的一部分，我想對該項目執行的任何操作都基於視圖。

另請注意，我使用的是closest，因爲項目視圖可能很複雜，並且click事件的實際目標可能是根元素的後代。

所以問題是：這種方式通過data屬性正確的方法來綁定視圖到它的根元素 - 特別是在考慮垃圾回收和內存泄漏時？能有比這更好的東西嗎？

來源

2013-02-19 treecoder

爲什麼在你的ItemView中沒有處理事件（使用'events'字段？）。那麼，你可以觸發一個自定義事件傳遞視圖？ – WiredPrairie 2013-02-19 15:20:34

因爲如果我在列表中有100個項目，我想避免必須註冊相同的100個處理程序，更重要的是，我不希望每次從列表中添加/刪除項目時都註冊/取消註冊處理程序。 – treecoder 2013-02-19 23:50:29

您應該在子視圖中捕獲事件。在我看來，任何Backbone視圖只應該處理其元素及其子元素的DOM事件。如果視圖是嵌套的，就像你的視圖一樣，最具體的視圖應該處理這些事件。

如果要將處理委派給父視圖，可以在ItemView中觸發骨幹事件，並聽取ListView中的處理。

ItemView = Backbone.View.extend({ 
    events: { 
    "click":"onClick" 
    }, 
    onClick: function() { 
    //trigger a custom event, passing the view as first argument 
    this.trigger('click', this); 
    } 
}); 

ListView = Backbone.View.extend({ 
    addItem: function(v) { 
    if (!(v instanceof ItemView)) return; 
    //listen to custom event 
    this.listenTo(v, 'click', this._onClick); 
    this.items.push(v); 
    this.$el.append(v.el); 
    }, 
    _onClick:function(itemView) { 
    //... 
    } 
});

如果click事件代表了一些「更高層次」的動作，如select或activate，您應該爲您的自定義事件本身。通過這種方式，您可以在視圖之間創建一個邏輯強大的界面，而無需考慮其父項ListView及其子項的實施細節。只有ItemView應該知道它是否被點擊，懸停，雙擊等。

來源

2013-02-19 15:21:16 jevakallio

我完全不同意這個......爲什麼要綁定更多的eventListeners？ – 2014-02-05 23:25:16

主幹：從元素中獲取視圖對象

回答

相關問題