javascript - 子对象调用兄弟对象的方法

Question

我有以下结构:

var PopupView = Backbone.View.extend({
  el:'#shade',
  events:{
    'click .popup-cancel': 'hide',
    'click .popup-commit': 'commit',
  },
  show: function(){
    ...
  },
  hide: function(){
    ...
  },
  initialize: function(){
    _.bindAll(this, 'show','hide','commit');
  }
});

var Popup1 = PopupView.extend({
  render: function(){
    ...
  },
  commit: function(){
    console.log('1');
    ...
  },
});

var Popup2 = PopupView.extend({
  render: function(){
    ...
  },
  commit: function(){
    console.log('2');
    ...
  },
});

问题是，当我从其中一个弹出窗口中单击 .popup-commit 时，它实际上会触发其中两个的方法。我尝试将 events 和 initialize() 的声明移至子类中，但这不起作用。

发生了什么事，如何修复它(以便仅触发我触发它的 View 的 commit 方法)？

Answer 1

您的问题就在这里:

el:'#shade'

在您的 PopupView 定义中。这意味着 PopupView 或其子类(当然除了那些提供自己的 el 的实例)将绑定(bind)到同一个 DOM 节点，并且它们都将监听到 id="shade" 元素上的事件。

您需要为每个 View 提供自己的el。我建议不要在这样的 View 定义中设置el。我认为如果您让每个 View 创建(和销毁)自己的 el ，您会过得更好。如果您执行以下操作:

var PopupView = Backbone.View.extend({
  className: 'whatever-css-class-you-need',
  tagName: 'div', // or whatever you're using to hold your popups.
  attributes: { /* whatever extra attributes you need on your el */ },
  //...
});

然后您的 View 将各自获得自己的el。请参阅Backbone.View documentation有关这些属性的更多信息。