var resultItemView = Marionette.CompositeView.extend({
        render : function(){            
            google.load("visualization", "1", {packages:["table"], callback: function() {       
                     var self = this;       
                     this._drawVisualization(self);
            }});
        },

       _drawVisualization : function(self){ 
           var data = new google.visualization.DataTable();

            //Here i'm creating data table  ...

            var chart = new google.visualization.LineChart(self.$el.find("#graphDiv"));
            chart.draw(data, null, null);               

       },
       return resultItemView;
   });

At render function google visualization is being loaded and in callback function drawVisualization is being called. Also i'm passing "this" object to this function as a parameter.To do this i used an anonymous function. In drawVisualization function self is equal to this "this" object. But i'm getting this error: "Uncaught TypeError: Object [object global] has no method '_drawVisualization'". What am i doing wrong? How can i correct it? Thanks for help.

    var resultItemView = Marionette.CompositeView.extend({
        render : function(){            
            google.load("visualization", "1", {packages:["table"], callback: function() {       
                     var self = this;       
                     this._drawVisualization(self);
            }});
        },

       _drawVisualization : function(self){ 
           var data = new google.visualization.DataTable();

            //Here i'm creating data table  ...

            var chart = new google.visualization.LineChart(self.$el.find("#graphDiv"));
            chart.draw(data, null, null);               

       },
       return resultItemView;
   });

At render function google visualization is being loaded and in callback function drawVisualization is being called. Also i'm passing "this" object to this function as a parameter.To do this i used an anonymous function. In drawVisualization function self is equal to this "this" object. But i'm getting this error: "Uncaught TypeError: Object [object global] has no method '_drawVisualization'". What am i doing wrong? How can i correct it? Thanks for help.

• javascript
• callback
• this
• google-visualization
• self

1 Answer 1

You need to put var self = this; outside of the call to google.load.

   var resultItemView = Marionette.CompositeView.extend({
        render : function(){     
            var self = this;       
            google.load("visualization", "1", {packages:["table"], callback: function() {       

                     self._drawVisualization(self);
            }});
        },

This is because the anonymous function you pass as a callback parameter to google.load will be called without specifying a this context - so that will be the global (window) object. Inside of your render function, you will have the correct this and can store that in a variable self to refer to it in your callback function.

EDIT: Also, if you do this, you do not need to pass the this context to the _drawVisualization method anymore. Complete Example:

    var resultItemView = Marionette.CompositeView.extend({
        render : function(){   
            var self = this;          
            google.load("visualization", "1", {packages:["table"], callback: function() {       
                self._drawVisualization();
            }});
        },

       _drawVisualization : function(){ 
           var data = new google.visualization.DataTable();

            //Here i'm creating data table  ...

            var chart = new google.visualization.LineChart(this.$el.find("#graphDiv"));
            chart.draw(data, null, null);               

       },
       return resultItemView;
   });