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?

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?

• javascript
• jquery
• html
• backbone.js

Share Improve this question Follow asked Sep 4, 2013 at 3:20 user2066880user2066880 5,03499 gold badges4444 silver badges6767 bronze badges 1

• For small callbacks without inner callbacks you can use function.prototype.bind (or similar alternatives) but for larger chunks of code I remend sticking with "self" or "that" because these lexically scoped variables continue to work even for nested callbacks. – hugomg Commented Sep 4, 2013 at 3:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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)
});

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;
}