在Backbone視圖中監聽事件散列下列出的所有事件？

Question

我想收聽事件散列中添加的所有視圖事件，可能就像常用的回調函數。

var ProductsView = Backbone.View.extend({ 

    events: { 
    'click .toggle-button': 'showHideToggle', 
    'click .remove-product': 'removeProduct', 
    'click .selectall-toggle-btn': 'selectAllToggle', 
    'click #prodlist-header .btn': 'doAction', 
    'change .selectallprod-toggle': 'selectAllProdToggle', 
}, 
    initialize: function(){ 

    this.events.on('allevents', function(e){ 
     console.log('Event', e); 
    }); 
    }, 

}); 

我認爲有某種方式與delegateEvents，但我不知道的執行。

Answer 1

您可以重寫View.delegate方法，該方法設置實際的事件偵聽並使其按照您希望的方式重新觸發事件。

例如，

delegate: function(eventName, selector, listener) { 
    // create a bound function that wraps the real listener 
    var newlistener = _.bind(function(evt) { 

     // trigger the allevents event on the view 
     this.trigger.call(this, 'allevents', evt); 

     // call the real listener 
     listener.apply(this, arguments); 
    }, this); 

    return Backbone.View.prototype.delegate.call(this, eventName, selector, newlistener); 
} 

然後您會聽在視圖中allevents事件：如果你想在視圖中的所有事件

initialize: function() { 
    this.listenTo(this, 'allevents', function(e){ 
     console.log('Event', e); 
    }); 
} 

並演示https://jsfiddle.net/nikoshr/a8be77g7/

Answer 2

調用相同的回調函數，您可以將相同的回調函數分配給它們。你的問題並不清楚你是否想同時回調所有的回調和每個事件回調。

var ProductsView = Backbone.View.extend({ 

    events: { 
     'click .toggle-button': 'catchAll', 
     'click .remove-product': 'catchAll', 
     'click .selectall-toggle-btn': 'catchAll', 
     'click #prodlist-header .btn': 'catchAll', 
     'change .selectallprod-toggle': 'catchAll', 
    }, 
    catchAll: function(e) { 
     console.log('Event', e); 
    } 
}); 

現在，如果你想趕上所有事件，並仍然有你的，我建議做一個獨立的觀點，即會聽body元素的其他事件的看法不同的回調，因爲事件冒泡他們將達到body元素（如只要你不停止傳播）。我更喜歡不斷變化的骨幹內部

var BodyView = Backbone.View.extend({ 
    el: 'body', 
    events: { 
     'click': 'clicked', 
     'change': 'changed' 
    }, 
    clicked: function(e) { 
     // This will catch all click events on the page 
     console.log('Clicked', e) 
    }, 
    changed: function(e) { 
     // This will catch all change events on page 
     console.log('Changed', e) 
    } 
}); 

我個人認爲這是不是覆蓋骨幹內部清潔了一下，有點更容易理解，因爲它只是一個視圖。

另一件事是，如果你在'初始化'中這樣做，你基本上必須將它添加到每個視圖，如果你想捕捉事件，這會導致不必要的樣板。在這個例子中，您只需設置一次監聽器，然後自動拾取它們，不需要向其他視圖添加任何內容。

當然，在BodyView中，您仍然可以對所有事件使用一次回調，就像上面的例子中所做的那樣。