Max SchmittMS
28th October 2013

How 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.


Need help on a project?

I'm available for freelance work.
Send me an email! Or find out more about my services.