CODEWITHSUNDEEP
backbone.js
Awea
Awea

Reputation: 3173

Backbone inheritance can't access child method in child

I'm currently working with backbone.js and I have a strange problem :

I have a class :

var AppView = Backbone.View.extend({
...
    events: {
        // Score bar
        "mouseover #jauge-bottom": "showToolTip",
        "mouseleave #jauge-bottom": "hideToolTip",
        // Form events and inputs
        "click a.social": "socialAction",
        "click a#sound": "switchMute",
        "submit form#form-intro": "introForm",
        "click .choisir-perso a.btn-jouer": "sexSet",
        "mouseover .overlay": "sexHover",
        "click #male": "sexClick",
        "mouseover #male": "sexHover",
        "click #female": "sexClick",
        "mouseover #female": "sexHover",
        "mouseleave #male": "sexHover",
        "mouseleave #female": "sexHover",
        "click input.field": "inputFocus",
        "blur input.field":  "inputFocus"
    },

    initialize: function() {
        this.user.bind('change', this.setScore, this);
      _.bindAll(this, 'render', 'setScore');
    },

And a subclass :

var Level1 = AppView.extend({

    events: _.extend({
    }, appMainView.prototype.events), // set the inheritance events

    render: function(){
        this.bla();
    },

    bla: function(){
        console.log('bla');
    }
});

I obtain this error in my console :

this.bla is not a function

My question is why and how can I fix it ?

Upvotes: 1

Views: 302

Answers (1)

Paul
Paul

Reputation: 18597

You're receiving the error because the render function context is not set to the view.

Add an initialize function to bind the render function to the view.

var Level1 = AppView.extend({
  initialize: function() {
    _.bindAll(this, 'render');
  },

  events: _.extend({
  }, appMainView.prototype.events), // set the inheritance events

  render: function(){
    this.bla();
  },

  bla: function(){
    console.log('bla');
  }
});

Upvotes: 3

Related Questions