admin管理员组文章数量:1415491
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 wele.
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=".1.4/jquery.min.js"></script>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<script src=".js/1.1.4/underscore-min.js"></script>
<script src=".js/0.3.3/backbone-min.js"></script>
<script src="{% static 'django_project/js/handlebars.js' %}"></script>
<link href=":400,700,200" rel="stylesheet" type="text/css">
<script src=";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 Handlebarspile(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;
}
});
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 wele.
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./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<script src="http://ajax.cdnjs./ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs./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./css?family=Raleway:400,700,200" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis./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.pile(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;
}
});
-
what is this
this.$el– renakre Commented May 6, 2015 at 20:00 - undefined properties are often a symptom of a greater issue, such as the parent object might not be [properly] initialized – MarkHu Commented May 6, 2015 at 20:02
- I'm not sure. How might I be able to tell? – Chuie Commented May 6, 2015 at 20:41
-
when i type
console.log(this.template(this));beforethis.$el.html(this.template(this));I see the template. So it is available. – Chuie Commented May 6, 2015 at 21:01
1 Answer
Reset to default 1for 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.pile(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>
...
本文标签： javascriptUncaught TypeError Cannot read property 39html39 of undefinedStack Overflow
版权声明：本文标题：javascript - Uncaught TypeError: Cannot read property 'html' of undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745192298a2646969.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论