Retaining “this” inside callback function

Question

I'm not sure if this question is specific to Backbone.js. I have a model with the following render function:

render: function() { 
    var self = this;
    this.$el.empty();
    this.model.fetch({
        success: function() {
            self.$el.append(self.template(self.model.attributes));      
        }
    });

    return this;
}

As you can see, inside the success callback function, I use a variable called self. This is because inside the callback, this is set to window when I want it to be set to the view. Is there a way I can retain the original reference of this without storing it in another variable?

Answer 1

Is there a way I can retain the original reference of this without storing it in another variable?

Yes, this is a reasonable use case for the proxy method

this.model.fetch({
    success: $.proxy(function() {
        this.$el.append(this.template(this.model.attributes));      
    }, this)
});

---

Alternatively you can use underscore's bind method:

this.model.fetch({
    success: _.bind(function() {
        this.$el.append(this.template(this.model.attributes));      
    }, this)
});

Answer 2

Use the Function.prototype.bind function to bind your object to the this variable within a function.

render: function() { 
    this.$el.empty();
    var successFunc = function() { 
                 this.$el.append(this.template(this.model.attributes));      
    };

    this.model.fetch({
        success: successFunc.bind(this)
        }
    });

    return this;
}