Question

我想要监听事件哈希中添加的所有视图事件，可能像常见的回调函数一样。

#slide-banner .item
  display: flex
  align-items: center
  justify-content: center
  background-size: cover !important
  background-position: center center
  width: 100%
  height: 80vh

我认为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); }); }, });有一些方法，但我不确定实施方式。

Answer 1

您可以覆盖设置实际事件监听的View.delegate方法，并按照您希望的方式重新触发事件。

例如，

models.Event.findAll() // I need Member associated with each Event.

然后，您将在视图上收听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

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

现在，如果您想要捕捉所有事件并且在其他视图中仍然有单独的回调，我建议制作一个单独的视图来监听身体元素事件，因为事件冒出来后它们将到达身体元素（只要你不要＃39;停止传播）。我更喜欢改变Backbone Internals

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

就我个人而言，我认为它比覆盖Backbone内部结构更清晰，更容易理解，因为它只是另一种观点。

另一件事是，如果您正在初始化＆＃39;如果你想捕获事件，你基本上必须将它添加到每个视图，这会导致不必要的样板。在这里的示例中，您只需设置一次侦听器并自动拾取它们，不需要将任何内容添加到其他视图中。

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

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

2 个答案: