I have a case that uses view inheritance, and my code looks essentially like:

parentView = Backbone.View.extend({
    events: {
        "some event": "business"
    },
    initialize: function(){
        _.bindAll(this);
    },
    business: function(e){
        ...
        this.someFunc && this.someFunc();
        ...
     }
});

childView = parentView.extend({
    events: {
        ...
    },
    constructor: function(){
       this.events = _.extend( {}, parentView.prototype.events, this.events );
       parentView.prototype.initialize.apply( this );
    },
    initialize: function(){
       _.bindAll(this);
    },
    someFunc: function(){
       ...
    }
});

Update: Moved this.events extension to the constructor.

My child view has someFunc in it, and during some business function in the parent view, it should call that function if it exists. If this is properly set to the childView, then this.someFunc should exist. This, however, is not the behaviour that I am experiencing.

During the initialize function (in the parent), this is indeed set to the child view. However, when some event fires, the business function is called with this set to parentView.

I have a case that uses view inheritance, and my code looks essentially like:

parentView = Backbone.View.extend({
    events: {
        "some event": "business"
    },
    initialize: function(){
        _.bindAll(this);
    },
    business: function(e){
        ...
        this.someFunc && this.someFunc();
        ...
     }
});

childView = parentView.extend({
    events: {
        ...
    },
    constructor: function(){
       this.events = _.extend( {}, parentView.prototype.events, this.events );
       parentView.prototype.initialize.apply( this );
    },
    initialize: function(){
       _.bindAll(this);
    },
    someFunc: function(){
       ...
    }
});

Update: Moved this.events extension to the constructor.

My child view has someFunc in it, and during some business function in the parent view, it should call that function if it exists. If this is properly set to the childView, then this.someFunc should exist. This, however, is not the behaviour that I am experiencing.

During the initialize function (in the parent), this is indeed set to the child view. However, when some event fires, the business function is called with this set to parentView.

• javascript
• inheritance
• view
• backbone.js

Share Follow edited Feb 3, 2018 at 15:26 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked Jun 6, 2011 at 20:04 idbentleyidbentley 4,21833 gold badges3636 silver badges5050 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Have you tried extending this.events in the constructor, instead of in the initialize function? If you do this in initialize, you're too late; event delegation for the business function has already been setup in the constructor, and will point to parentView (see the call to this.delegateEvents(); in Backbone.View's constructor).

Updated with a working example:

ParentView = Backbone.View.extend({
    name: 'ParentView',
    events: {
        "event": "business"
    },
    business: function(e){
        this.someFunc && this.someFunc();
    }
});

ChildView = ParentView.extend({
    name: 'ChildView',
    events: {
    },
    constructor: function(){
       this.events = _.extend( {}, ParentView.prototype.events, this.events );
       console.debug( this.events );
       ParentView.prototype.constructor.apply( this, arguments );
    },
    someFunc: function(){
        console.debug('someFunc; this.name=%s', this.name);
    }
});

child = new ChildView();
$( child.el ).trigger('event');
// logs 'this' in 'someFunc'; the name is 'ChildView'.

Actually, I'dont know if this solves your case, but I usually do this: this.constructor.__super__.initialize.apply(this, arguments); and works like a charm. My solution is pletely wrong. Here's why:

var Model1 = Backbone.Model.extend({
  method: function () {
    // does somehting cool with `this`
  }
});

var Model2 = Model1.extend({
  method: function () {
    this.constructor.__super__.method.call(this);
  }
});

var Model3 = Model2.extend({
  method: function () {
    this.constructor.__super__.method.call(this);
  }
});

var tester = new Model3();

// Boom! Say hallo to my little stack-overflowing recursive __super__ call!
tester.method();

The call to this.constructor.__super__ in Model2::method will resolve to (drum-roll) Model2::method.

Always use ExplicitClassName.__super__.methodName.call(this, arg1, arg2 /*...*/) or Coffee-script's super.

You can solve this problem by adding this line to the initialize method of the child:

_.bind(this.business, this)

Hopefully someone can point you to a better description of the underlying mechanisms than I can provide but I'll give it a shot:

What happens is that the method will use the context of the scope it was defined in unless told otherwise. initialize is told to use the context of the child when you call parentView.prototype.initialize.apply(this) because you are passing in the childView with the this reference to the apply method.

You can bind the business method to the context of the child by using the underscore.js bind method as described above.