Automatically extend event from a base view

I have a base class for all views and then in each section of the app, like profiles, I also have a base class. That way shared templates and properties can be used throughout my app on many levels.

开发者_Go百科

I know that if you make the event property in a Backbone view a function instead of an object literal, it will be instantiated for you, I'm not sure how to use this to my advantage, though. My question is, what's the best way to automatically extend events created in a base view.

I know one possibility where I, on view initialize, fetch the base event class and extend my current event on to it, but it seems a little hacky, and I would have to duplicate this code on every view. If you know a better way please share.

Thanks.

---

var ParentView = Backbone.View.extend({
    'events': {
        'click .parent-something': "onParentSomethingClick"
    }
}); 

var ChildView = ParentView.extend({
    'events': _.extend({
        'click .something': 'onSomethingClick',
    }, ParentView.prototype.events)
});

It's not doing nothing, but it's the simplest way I've seen so far.
I've also created a gist on another way I've been using: https://gist.github.com/1271041

---

Here's how I extend the parent view's events in my child view:

var ParentView = Backbone.View.extend({

        events: {
            'click .link': 'onLinkClick'
        }
});

var ChildView = ParentView.extend({

        events: function(){
            return _.extend({
                'click .something': 'onSomethingClick',
            }, this.constructor.__super__.events);
        }
});

Note: this only works as of Backbone 0.5.3. Before that version, you couldn't define events as a function.

---

I believe JohnnyO's answer is the best. However I came across two other ways of doing it and I'll paste them here.

It's a pity that there is no "automatic" solution that doesn't require additional hand-written code in each new view, but it is what it is.

 ChildView = ParentView.extend({
     name: 'ChildView',
     events: {
     },
     constructor: function(){
        this.events = _.extend( {}, ParentView.prototype.events, this.events );
        console.debug( this.events );
        ParentView.prototype.constructor.apply( this, arguments );
     },
     someFunc: function(){
         console.debug('someFunc; this.name=%s', this.name);
     } 
 });

By Paul - backbone.js view inheritence. `this` resolution in parent

I didn't know you could provide a constructor method in your Backbone.view.extend. Good to know.

 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()   
   } 
});

By rulfzid - Sub Class a Backbone.View Sub Class & retain events

I had already envisioned (and declined) this approach but this one has the added twist of calling your base event something else so that "genericEvents don't overwrite any events" as the author says. Unless he's talking about some kind of munging of both events you're passing inside of both events object, I'm not sure what he's talking about, I'd just use proto or prototype to reference the parents events. But again, good to know.