Sub Class a Backbone.View Sub Class & retain events

Question

I have a generic subclass of Backbone.View which has a close event listener.

var GenericView = Backbone.View.extend({

    events          


        

Answer 1

@Nupul is exactly right: you're not subclassing your GenericView.

In fact, subclassing isn't really the right word here, since JavaScript doesn't do classical inheritance.

So let's first try and understand what's happening here:

var GenericView = Backbone.View.extend( propertiesObj, classPropertiesObj )

Backbone.View is a constructor function, that when called with the new keyword, creates a new object for you.

Since this is JS, all function are really function objects, so Backbone.View.extend is just a function hanging off Backbone.View that does a few things:

1. It sets up the prototype chain, so you can access properties and call functions defined in the 'base' class
2. It creates and returns a new constructor function you can call (which here would be GenericView) to instantiate objects of your inheriting class
3. It copies itself to be a function hanging off the constructor function it returns so that you can further inherit.

So the correct way to set up the protoype chain you want is:

var ImplementedView = GenericView.extend({
  // implementation goes here
});

and NOT:

var ImplementedView = new GenericView({//stuff});

because this just creates a new instance of a GenericView.

Now, you still have a problem, because when you do something like:

var impl_view = new ImplementedView;

impl_view.events; // This isn't merged with the events you created
                  // for the GenericView

At this point there are different ways to get the result you want, here's one that uses delegateEvents kind of like how you did. Using it isn't bad, incidentally.

var GenericView = Backbone.View.extend({

  genericEvents: { 'click .close': 'close' },

  close: function() { console.log('closing view...'); }

});

var ImplView = GenericView.extend({

  events: { 'click .submit': 'submit' },

  initialize: function(options) {
    // done like this so that genericEvents don't overwrite any events
    // we've defined here (in case they share the same key)
    this.events = _.extend({}, this.genericEvents, this.events);
    this.delegateEvents()
  }
});