In Marionette, how might I go about calling a function of the same name on the parent object of a view without overwriting the original function?

For instance:

var someView = new Backbone.Marionette.ItemView.extend({
    onRender: function () {
        console.log('foo');
    }
});

var anotherView = someView.extend({
    onRender: function () {

        // call someView's original onRender function

        console.log('bar');
    }
});

anotherView.render();

Resulting in the console output:

foo
bar

In Marionette, how might I go about calling a function of the same name on the parent object of a view without overwriting the original function?

For instance:

var someView = new Backbone.Marionette.ItemView.extend({
    onRender: function () {
        console.log('foo');
    }
});

var anotherView = someView.extend({
    onRender: function () {

        // call someView's original onRender function

        console.log('bar');
    }
});

anotherView.render();

Resulting in the console output:

foo
bar

• javascript
• backbone.js
• marionette

• 1 So you don't mean the parent view (in the tree), but the super view from which you inherited? – Bergi Commented Jun 4, 2014 at 1:22

1 Answer 1

You can use __super__, which is set up by extend:

var anotherView = someView.extend({
    onRender: function () {
        this.__super__.onRender.call(this);
        console.log('bar');
    }
});

or just directly reference the method that you want to apply on your instance:

var anotherView = someView.extend({
    onRender: function () {
        someView.prototype.onRender.call(this);
        console.log('bar');
    }
});

For more information, see Javascript Class Inheritance For Functions and what .call() does.