Accessing parent class in Backbone

JavascriptOopClassInheritancebackbone.js

Javascript Problem Overview


I need to call the initialize method of the parent class, from inside the inherited MyModel-class, instead of completely overwriting it as I am doing today.

How could I do this?

Here's what my code looks right now:

BaseModel = Backbone.Model.extend({
    initialize: function(attributes, options) {
        // Do parent stuff stuff
    }
});

MyModel = BaseModel.extend({
	initialize: function() {
	    // Invoke BaseModel.initialize();
        // Continue doing specific stuff for this child-class.
	},
});

Javascript Solutions


Solution 1 - Javascript

Try

MyModel = BaseModel.extend({
    initialize: function() {
        BaseModel.prototype.initialize.apply(this, arguments);
        // Continue doing specific stuff for this child-class.
    },
});

Solution 2 - Javascript

MyModel = BaseModel.extend({
    initialize: function() {
        MyModel.__super__.initialize.apply(this, arguments);
        // Continue doing specific stuff for this child-class.
    },
});

Solution 3 - Javascript

This worked for me, when I was trying to inherit among my models:

MyModel.prototype.initialize.call(this, options);

Referenced from http://documentcloud.github.com/backbone/#Model-extend

Thanks.

Solution 4 - Javascript

I think it'd be

MyModel = BaseModel.extend({
    initialize: function() {
        this.constructor.__super__.initialize.call(this);
        // Continue doing specific stuff for this child-class.
    },
});

Solution 5 - Javascript

this seems to be almost a duplicate of https://stackoverflow.com/questions/8596861/super-in-backbone, so you want something like this:

Backbone.Model.prototype.initialize.call(this);

Solution 6 - Javascript

Similar to @wheresrhys, but I would use apply instead of call in case BaseModel.initialize is expecting arguments. I try to avoid processing the attributes map that can be passed to a Backbone Model upon initialization, but if the BaseModel were actually a View or a Collection then I might want to set options.

var MyModel = BaseModel.extend({
    initialize: function() {
        this.constructor.__super__.initialize.apply(this, arguments);
        // Continue doing specific stuff for this child-class.
    },
});

Solution 7 - Javascript

here's a multi generation callSuper method, just add it to your extending class.

callSuper: function (methodName) {
    var previousSuperPrototype, fn, ret;

    if (this.currentSuperPrototype) {
        previousSuperPrototype = this.currentSuperPrototype;
        // Up we go
        this.currentSuperPrototype = this.currentSuperPrototype.constructor.__super__;
    } else {
        // First level, just to to the parent
        this.currentSuperPrototype = this.constructor.__super__;
        previousSuperPrototype = null;
    }

    fn = this.currentSuperPrototype[methodName];

    ret = (arguments.length > 1) ? fn.apply(this, Array.prototype.slice.call(arguments, 1)) : fn.call(this);

    this.currentSuperPrototype = previousSuperPrototype;

    return ret;
}

Solution 8 - Javascript

You might consider rewriting your code using functional inheritance.

var BackBone=function(){
    var that={};

    that.m1=function(){

   };
   return that;

};

var MyModel=function(){

 var that=BackBone();
 var original_m1=that.m1;

//overriding of m1
 that.m1=function(){
    //call original m1
 original_m1();
 //custom code for m1
  };
};

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIndustrialView Question on Stackoverflow
Solution 1 - JavascriptYury TarabankoView Answer on Stackoverflow
Solution 2 - JavascriptRaynosView Answer on Stackoverflow
Solution 3 - JavascriptrookieRailerView Answer on Stackoverflow
Solution 4 - JavascriptwheresrhysView Answer on Stackoverflow
Solution 5 - JavascriptErichBSchulzView Answer on Stackoverflow
Solution 6 - JavascriptculurienneldorethView Answer on Stackoverflow
Solution 7 - JavascriptBnayaView Answer on Stackoverflow
Solution 8 - JavascriptDani CriccoView Answer on Stackoverflow