javascript - 在传播之前使用自定义数据扩展事件

Question

我有一个在另一个 View (OuterView) 内部呈现的 Backbone View (InnerView)。两者都包含 click 事件的事件处理程序，并且启用事件委托(delegate)(默认情况下)。

我希望 InnerView 在事件进一步传播之前将一些数据附加到事件中。然而，如下所示的代码似乎根本不影响 e.data，因为它之后仍然未定义:

var InnerView = Backbone.View.extend({
  events: {
    "click": "onClick"
  },
  render: function () {
    // ...
  },
  onClick: function (e) {
    e.data = e.data || {};
    e.data.myData = 123;
    console.log(e.data); // Object { myData: 123 }
  }
});

var OuterView = Backbone.View.extend({
  events: {
    "click": "onClick"
  },
  render: function () {
    // ...
    this.$el.append(new InnerView);
    // ...
  },
  onClick: function (e) {
    console.log(e.data); // undefined
  }
});

我尝试阻止事件传播，然后使用自定义数据重新触发它(这将以某种不同的格式存储，因为我在这里看不到将数据附加到事件对象的方法):

// alternative version of InnerView#onClick()
onClick: function (e) {
  e.stopImmediatePropagation();
  this.trigger('click', {myData: 123});
}

但随后 OuterView 根本没有收到任何点击事件。

我该如何处理这个问题？请注意，我无法在目标 View 上直接触发事件(或调用方法或设置属性)，因为两者不会相互暴露(这就是我决定利用事件机制的原因)。

Answer 1

您不能使用 this.trigger() 因为这是使用 Backbone 的事件 API 而不是 jQuery 的。您需要 OuterView 来监听来自 InnerView 的此事件，但是，正如您所说， View 不会相互暴露。

如果你想向 DOM 发送数据，我认为转向 jQuery's trigger 是正确的选择。 。但是，我会从 InnerView 触发自定义事件:

onClick: function () {
    this.$el.trigger('custom', {
        myData: 123
    });
}

这样，点击事件传播就可以正常进行，OuterView 可以专门监听自定义事件:

events: {
    "custom": "onCustom"
},

onCustom: function (e, data) {
    console.log(data.myData); //123
}

此外，请注意将自定义数据作为第二个参数传递给事件处理程序的便利性。