backbone.js view inheritance. `this` resolution in parent

Question

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

parentView = Backbone.View.extend({
    events: {
        \"some event\": \"busines         


        

Answer 1

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 completely 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.

Answer 2

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'.

Answer 3

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.