Question

I was wondering what is the intended method for dealing with “this” references in callbacks frequently used in frameworks like jQuery and Backbone.js

Here is the simplified example I’m having a problem with, using Backbone.js and jQuery UI, but it is not really specific to these frameworks.

var MyView = Backbone.View.extend({
   render: function() {
      $('#mybutton').click(function() {
         // My code in here
      });
   },

   callMe: function() {
      alert('Rawr!');
   }
});

Now, how would I go about referencing the instance of MyView from inside the click handler? For example, how would I call “callMe” from inside the click handler? Outside the handler I’d just call this.callMe(); but “this” gets replaced with the DOM element inside the click handler. What is the best way to approach this?

Answer 1

The most effective way is simply to store the result of this in another variable, and then use that within the callback;

var MyView = Backbone.View.extend({
   render: function() {
      var that = this;

      $('#mybutton').click(function() {
          // use that for MyView and this for the DOM element
      });
   },

   callMe: function() {
      alert('Rawr!');
   }
});

Alternately, you can use either jQuery.proxy() or the HTML 5 (beware of backwards compatability) Function.prototype.bind() method to define the value of this. Obviously then you’d loose the ability to use this to refer to the DOM element, so would have to rely on the target property of the Event object;

var MyView = Backbone.View.extend({
   render: function() {
      $('#mybutton').click((function(e) {
          // Use `this` for MyView and `e.target` for the DOM element
      }).bind(this));
   },

   callMe: function() {
      alert('Rawr!');
   }
});

Or:

var MyView = Backbone.View.extend({
   render: function() {
      $('#mybutton').click(jQuery.proxy(function(e) {
          // Use `this` for MyView and `e.target` for the DOM element
      }, this));
   },

   callMe: function() {
      alert('Rawr!');
   }
});