在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中，您仍然可以对所有事件使用一次回调，就像上面的例子中所做的那样。