Oct 28th 2013How to Inherit Events from Backbone Views

Today I needed a way to inherit events from a parent view using Backbone. I found a great solution on Stack Overflow and here's how I implemented it. The code examples in this post assume you're using RequireJS for AMD but of course the solution also works with plain Backbone.

All my views inherit from a view called BaseView:

BaseView

define('views/base-view', ['backbone', 'underscore'], function(Backbone, _) {
  return Backbone.View.extend({
    inheritEvents: function(parent) {
      var parentEvents = parent.prototype.events;

      if (_.isFunction(parentEvents)) {
        parentEvents = parentEvents();
      }

      this.events = _.extend({}, parentEvents, this.events);
    }
  });
});

The inheritViews-method is key here. Now if you want to extend a view from another including all events, you can do the following:

ChildView

define('views/child-view', ['views/parent-view'], function(ParentView) {
  return ParentView.extend({
    events: {
      'click #start-button': '_start'
    },

    initialize: function() {
      ParentView.prototype.initialize.apply(this, arguments);

      // inherit all events from ParentView
      this.inheritEvents(ParentView);
    },

    _start: function() {
      console.log('Starting');
    }
  });
});

That's it! Make sure you call inheritEvents in the constructor and that ParentView extends BaseView (or another view that extends BaseView). Otherwise, inheritEvents will not be available to you.