Uncaught TypeError: Cannot read property 'html' of undefined

javascript jquery html backbone.js handlebars.js

13,865

for some reason this.$el.html(...) was causing the problem. Even if I specified el in the view it wouldn't work. this is the code that worked.

django_project.js

var template = function (name) {                                                
    var source = $('#' + name + '-template').html();                            
    return Handlebars.compile(source);                                          
};                                                                              

var GoogleMap = Backbone.View.extend({                                          
    el: $('#map-canvas'),                                                       
    template: template('grid-12'),                                              
    initialize: function () {                                                   
        this.render();                                                          
    },      

    activate: function () {                                                     
        var mapOptions = {                                                      
            zoom: 8,                                                            
            center: new google.maps.LatLng(-34.397, 150.644),                   
            mapTypeId: google.maps.MapTypeId.ROADMAP                            
        };                                                                      
        var domElement = $('#googleMapBox');                                    
        this.map = new google.maps.Map(domElement.get(0), mapOptions);          
    },                                                                          
    render: function () {                                                       
        $('#map-canvas').html(this.template(this));                             
        this.activate();                                                        
        return this;                                                            
    }                                                                           
});                                                                             

$(function () {                                                                 
    var GoogMap = new GoogleMap();                                              
});

index.html

    ...
    <div id="map-canvas"></div>                                             
    <script type="text/x-mustache-template" id="grid-12-template">          
        <div id = "googleMapBox"                                            
        class = "box-content"                                               
        style = "height: 600px; background-color: #b0c4de;" > </div >          
    </script> 
    ...

13,865

Chuie

Updated on June 04, 2022

Comments

Chuie almost 2 years

I am trying to have a google map display on my webpage using backbone.js and handlebars.js, but I can't get it to display. When I load the page, I get this error in my javascript console:

Uncaught TypeError: Cannot read property 'html' of undefined

Does anyone know what I am doing wrong? Any and all suggestions welcome.

index.html

<!DOCTYPE html>   
<html>                                                                          
    <head>                                                                      
        {% load staticfiles %}                                                  
        <meta charset="utf-8">                                                  
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">          
        <meta http-equiv="cleartype" content="on">                  
        <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>        
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
        <script src="{% static 'django_project/js/handlebars.js' %}"></script>  
        <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,200" rel="stylesheet" type="text/css">
        <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
    </head>
    <body>
        <script type="text/x-mustache-template" id="grid-12-template">          
            <div id="googleMapBox" class="box-content"></div>               
        </script>                                                               
        <script src="{% static 'django_project/js/django_project.js' %}"></script>
        <script>                                                                
            var GoogMap = new GoogleMap;                                    
            GoogMap.render();
        </script>  
    </body>
</html>

django_project.js

var template = function (name) {                                                
    var source = $('#' + name + '-template').html();                        
    return Handlebars.compile(source);                                      
};                                                                              

var GoogleMap = Backbone.View.extend({

    template: template('grid-12'),

    initialize: function() {},

    activate: function() {

        var mapOptions = {                                                      
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var domElement = this.$('#googleMapBox');
        this.map = new google.maps.Map(domElement.get(0), mapOptions);

    },                                                                          

    render: function() {

        this.$el.html(this.template(this));                             
        this.activate();

        return this;

    }

});

renakre almost 9 years

what is this this.$el
MarkHu almost 9 years

undefined properties are often a symptom of a greater issue, such as the parent object might not be [properly] initialized
Chuie almost 9 years

I'm not sure. How might I be able to tell?
Chuie almost 9 years

when i type console.log(this.template(this)); before this.$el.html(this.template(this)); I see the template. So it is available.