Question

I have several views that have common code I’d like to abstract into a custom Backbone.View class. Is there any best practices for doing this?

is a good pattern to do something like this? :

 // Base Grid view
 var GridView = Backbone.View.extend({
     initialize : function(){
                 //common view init code .. 

                 //do the plug in overrides
                 if (options.addHandler)
                     this.addHandler = options.addHandler;
                 if (options.events)
                     //?? extend default events or override? 
                     this.events = $.extend(this.events, options.events);
                 }, 
     addHandler : function() { 
                //defaulthandler this code can be overridden
                });
});


// in another object create some views from the GridView base
....
var overrides = { events:"xxx yyy", el: ulElement addHandler: myAddFunction } 
var UserList = GridView.extend(overrides)
var userList = new UserList(users, options);
....

var coursesOverrides : {addHandler:  ...}
var coursesOptions:    {el: courseElement, ...}
var CourseList = GridView.extend(coursesOverrides)
var courseList= new CourseList (courses, coursesOptions)

// along the same lines  maybe there's an abstraction for toolbar views 
var ClassToolbarView = ToolbarBase.extend(toolOverrides)
var classtoolbar = new ClassToolbarView(actions, toolbaropts)

Any pointers to good examples of extending a View for refactoring common view code is appreciated.

Answer 1

First, I don’t see the options being passed in your initializer(), so that’s a bug.

Secondly, the .extend() method is inherited:

var GridView = Backbone.View.extend({ ... })
var GridViewWithNewFunctionsAndEvents = GridView.extend({ ... })

And you can replace or extend GridView’s functionality, and call new GridViewWithNewFunctionsAndEvents() and get the extra functionality in a new object you need, just like you extend the Backbone stock View class.

If you need to extend the initializer, you can do this to call the initializer on the superclass:

 var GridViewWithNewFunctionsAndEvents = GridView.extend({
    initializer: function(options) {
        GridView.prototype.initializer.call(this, options);
        /* Your stuff goes here */
    }
  });