在主干视图中侦听事件哈希下列出的所有事件

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)
}
});

就我个人而言，我认为它比覆盖主干内部更干净，更容易理解，因为它只是另一种视图。

另一件事是，如果你在"initialize"中进行，如果你想捕捉事件，你基本上必须将它添加到每个视图中，这会导致不必要的样板。在这里的示例中，您只设置了一次监听器，它们就会被自动拾取，不需要向其他视图添加任何内容。

当然，在BodyView中，你仍然可以像上面的例子一样，让它对所有事件只使用一个回调。