A simple mixin for making a Backbone.View extendable without worrying about overriding initialize or events.

extendableMixin.js

  /**
   * View mixin - allows parent views to have their own events objects & initialize methods.
   *
   * Usage: On your parent view only:
   * var MyView = Backbone.View.extend(ExtendableMixin).extend({ // ... })
   *
   * NOTICE: This completely breaks when using the Backbone-tools chrome extension. It modifies View.constructor.
   */
  var ExtendableMixin = {

    // Override view constructor to traverse the prototype chain and merge events
    // and initialize functions.
    constructor: function ExtendableMixin() {

      // How deep are we going?
      var proto = this, obj, depth = 0;
      while (!Object.getPrototypeOf(proto).hasOwnProperty('initialize') ||
              Object.getPrototypeOf(proto).initialize !== Backbone.View.prototype.initialize) {
        depth++;
        proto = Object.getPrototypeOf(proto);
      }

      // Starting from the bottom of the prototype chain (Backbone.View), extend this.events &
      // call initialize() for every parent class except this one. (will be called by Backbone.View())
      while (depth > 1) {
        proto = getPrototypeAtDepth(this, depth);
        this.events = _.extend(this.events || {}, proto.events);

        // Don't run an init function more than once.
        if (proto.hasOwnProperty('initialize')) {
          proto.initialize.apply(this, arguments);
        }
        depth--;
      }

      // Call view constructor. This will call the root initialize().
      Backbone.View.apply(this, arguments);
    }
  };

  function getPrototypeAtDepth(object, depth) {
    while (depth) {
      object = Object.getPrototypeOf(object);
      depth--;
    }
    return object;
  }