Uncaught TypeError: Невозможно прочитать свойство 'html' undefined

Я пытаюсь отображать карту Google на моей веб-странице с помощью backbone.js и handlebars.js, но я не могу ее отобразить. Когда я загрузить страницу, я получаю эту ошибку в моей консоли JavaScript:Uncaught TypeError: Невозможно прочитать свойство 'html' undefined

Uncaught TypeError: Cannot read property 'html' of undefined

Кто-нибудь знает, что я делаю неправильно? Любые предложения приветствуются.

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; 

    } 

});

источник

2015-05-06 Chuie

что это 'это. $ El' – renakre

неопределенные свойства часто являются симптомом более вопроса, например, родительский объект может не будет [правильно] инициализирован – MarkHu

Я не уверен. Как я могу сказать? – Chuie

по какой-то причине это. $ 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> 
    ...

источник

2015-05-07 19:10:09 Chuie

Uncaught TypeError: Невозможно прочитать свойство 'html' undefined

ответ

Смежные вопросы