创建实例时覆盖的主干视图类事件答案

【问题标题】：Backbone view class events overwritten when creating instance创建实例时覆盖的主干视图类事件
【发布时间】：2013-09-27 10:47:37
【问题描述】：

我创建了一个继承自 Backbone.View 的类，它定义了一些 DOM 事件：

var MyView = Backbone.View.extend({
  el: '#myview',
  events: {
    'click .somebutton': 'somefunction',
    'click .otherbutton': 'otherfunction'
  },
  somefunction: function(){ console.log('somefunction!'); },
  otherfunction: function(){ console.log('otherfunction!');  }
});

当实例化这个视图 (new MyView();) 时，一切似乎都井然有序，只要点击元素就会触发我的回调。

但是，如果我像这样实例化我的视图：

new MyView({
  events: {
    'click .thirdbutton': function(){ 
       console.log('thirdfunction'); 
    }
  }
});

我所有现有的班级事件都被这个单一的事件所覆盖。将我的仅实例事件与现有类事件合并的正确方法是什么？在我的示例中，我希望所有 3 个事件在我的实例中都处于活动状态。

【问题讨论】：

标签： javascript events backbone.js prototypal-inheritance

【解决方案1】：

你可以在initialize -方法中做到这一点

initialize: function() {
  _.extend(this.events, {
    'click .thirdbutton': function() {...}
  });
}

这可能不是最漂亮的答案，但应该可以。

【讨论】：

感谢您的回答！我认为这适用于更简单的情况。关键是，就我而言，我需要类的初始化方法，并且我正在创建该类的多个实例，每个实例具有不同的事件。 +1 努力。我没有提供足够的信息。（已经解决了我的问题，请参阅我自己的答案）

【解决方案2】：

找到了解决方案，感谢这个答案： Backbone View: Inherit and extend events from parent

我在类的选项中添加了一个extraEvents 键，并将我的events 对象更改为一个合并额外事件的函数。下面的代码示例，如果它对其他人有帮助：

var MyView = Backbone.View.extend({
  el: '#myview',
  options: {
    extraEvents: {}      
  },
  originalEvents: {
    'click .somebutton': 'somefunction',
    'click .otherbutton': 'otherfunction'
  },
  events: function(){
    return _.extend({}, this.originalEvents, this.options.extraEvents);
  },
  somefunction: function(){ console.log('somefunction!'); },
  otherfunction: function(){ console.log('otherfunction!');  }
});

现在我可以像这样实例化我的视图：

new MyView({
  extraEvents: {
    'click .thirdbutton': function(){ 
       console.log('thirdfunction'); 
    }
  }
});

【讨论】：