Question

我正在尝试使用backbone.js和handlebars.js在我的网页上显示谷歌地图，但我无法显示它。当我加载页面时，我在我的javascript控制台中收到此错误：

未捕获的TypeError：无法读取未定义的属性'html'

有谁知道我做错了什么？任何和所有建议都欢迎。

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

    }

});

Answer 1

出于某种原因这个。$ el.html（...）导致了这个问题。即使我在视图中指定el它也行不通。这是有效的代码。

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> 
    ...

未捕获的TypeError：无法读取未定义的属性'html'

1 个答案: