How do I use "this" in my Backbone View?

Question

var homeView = Backbone.View.extend({
 el: $("#main_container"),
 initialize: function(){
 _.bindAll(this, 'render');
 },
 render:function(){
 $.get('/home', {}, function(data){
 console.log(data);
 var tpl = _.template(home_container_temp, {});
 this.el.html(tpl);
 });
 }
 });

I want to do a ajax GET request, and then set the data. But I can't do it because I get:

Uncaught TypeError: Cannot call method 'html' of undefined

Answer 1

this inside the $.get() is not refering to the view.

Try:

var homeView = Backbone.View.extend({
 el: $("#main_container"),
 initialize: function(){
 _.bindAll(this, 'render');
 },
 render:function(){
 var $el = this.el;
 $.get('/home', {}, function(data){
 console.log(data);
 var tpl = _.template(home_container_temp, {});
 $el.html(tpl);
 });
 }
});

• TIMEX: THanks. Why the dollar sign in front of the var $el? Why not leave the dollar sign out?
• kubetz: @TIMEX The $el is just my preference to indicate that the variable contains a jQuery object. It has no functional consequences. You can name the variable however you want.

Answer 2

That's the JavaScript feature of "dynamic this", if you want to use "this" in your callback, please keep it in the variable outside the callback:

render: function() {
 var _this = this; // keep it outside the callback
 $.get('/home', {}, function(data){
 console.log(data);
 var tpl = _.template(home_container_temp, {});
 // use the _this variable in the callback.
 _this.el.html(tpl);
 });
}