Question

I’ve seen this question regarding inheritance in Backbone:
Backbone.js view inheritance. Useful but doesn’t answer my question.

The problem I’m experiencing is this:

Say I have a class Panel (model in this example);

var Panel = Backbone.Model.extend({
    defaults : {
        name : 'my-panel'
    }
});

And then an AdvancedPanel;

var AdvancedPanel = Panel.extend({
    defaults : {
        label : 'Click to edit'
    }
});

The following doesn’t work:

var advancedPanel = new AdvancedPanel();
alert(advancedPanel.get('name')); // Undefined :(

JSFiddle here: http://jsfiddle.net/hWmnb/

I guess I can see that I can achieve this myself through some custom extend function that creates a deep copy of the prototype, but this seems like a common thing that people might want from Backbone inheritance, is there a standard way of doing it?

Answer 1

Picking this up, I have written a simple advancedExtend method to replace the line (from this inheritance construct):

Panel.extend = Backbone.Model.extend;

with:

Panel.extend = advancedExtend;

My advancedExtend method looks like this:

function advancedExtend(protoProps, classProps) {

    var delegate = this.render ? 
                        Backbone.View : (this.save ? 
                            Backbone.Model : (this.navigate ? 
                                Backbone.Router : Backbone.Collection)); 

    var child = delegate.extend.apply(this, [ protoProps, classProps ]);

    _.defaults(child.prototype.defaults, this.prototype.defaults);
    _.defaults(child.prototype.events, this.prototype.events);
    _.defaults(child.prototype.attributes, this.prototype.attributes);

    return child;
};

N.B. I realise the definition of delegate is pointless since all of the Backbone prototype extend methods are the same, but figured this might be more robust for future versions.

See the JSFiddle here.

I would be interested to hear what Backbone veterans think of this approach, given that it is non-standard…