Backbone view class events overwritten when creating instance

Question

I have created a class inherited from Backbone.View which defines some DOM events:

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

When instantiating this view (new MyView();) all seem to be in order and my callbacks are fired whenever the elements are clicked.

However if I instantiate my view like this:

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

All my existing class events get overriden by this single one. What is the correct way to merge my instance-only events with the existing class events? In my example I want all 3 events to be active in my instance.

score 1 · Answer 1 · answered Sep 27 '13 at 11:02

1

You could do it in the initialize -method

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

This might not be the prettiest of answers, but it should work.

answered Sep 27 '13 at 11:02

jakee

18,486
3
37
42

Thanks for your answer! I think this would work for simpler cases. The point is, for my case I need the initialize method on the class, and I'm creating multiple instances of that class with different events for each one. +1 for effort. I didn't supply enough info. (Already fixed my prob tho, see my own answer) – Hless Sep 27 '13 at 11:18

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Found a solution, thanks to this answer: Backbone View: Inherit and extend events from parent

I added a extraEvents key to the options of the class, and I changed my events object to a function that merges the extra events. Code example below, if it helps anyone else:

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

Now I can instantiate my view like this:

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

Backbone view class events overwritten when creating instance

2 Answers2