上下文未定义JavaScript [英] context is not defined JavaScript
问题描述
所以指的是我在这里的原始问题谷歌地图Javascript V3未捕获TypeError：无法读取属性'offsetWidth'为空，并做了大量的谷歌搜索后，我发现了一个解决方案，我认为这是可行的，这是如何使用把手将多个Google地图区域附加到div上。
然而，我已经按照以下的方式执行了我的
var EmployeeView = function（employee）{
this.render = function（）{
$（'body'）。append（this.el）;
//在新div中，将Handlebars模板与来自员工
this.el.html（EmployeeView.template（employee））的数据放在一起（ready（function（）{
var mapOptions = {
center：new google.maps.LatLng（-34.397,150.644），
zoom：8
};
var map = new google.maps.Map（ document.getElementById（map-canvas），mapOptions）;
}）;
返回此;
};
this.initialize = function（）{
this.el = $（< / div>）;
window.localStorage.removeItem（'paramId'）;
console.log（'removed'）;
window.localStorage.setItem（'paramId'，employee）;
console.log（'added'+ employee.id）;
};
this.initialize（）;
}
EmployeeView.template = Handlebars.compile（$（＃employee-tpl）。html（））;
不知道这是否是'提及'该解决方案的正确方式，但现在，每当我运行页面中，引发以下错误未捕获ReferenceError：上下文未定义
任何人有任何想法？并添加，我的HTML如下
< body>
< script id =employee-tpltype =text / x-handlebars-template>
< div class ='details'>
< img class ='employee-image'src ='img / {{firstName}} _ {{lastName}}。jpg'/>
< ul>
< li>< a href =＃map / {{this.id}}>请参阅地图< / a>< / li>
< li>与朋友分享< / li>
< li>< div id =map-canvas/>< / li>
< / ul>
< script src =lib / iscroll.js>< / script>
< script src =lib / handlebars.js>< / script>
< script src =lib / jquery-1.8.2.min.js>< / script>
< script src =js / storage / cafe-memory-store.js>< / script>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?APIKEY&sensor=true>< / script>
< script src =js / MapView.js>< / script>
< script src =js / EmployeeView.js>< / script>
< script src =js / HomeView.js>< / script>
< script src =js / main.js>< / script>
< / body>
在这一行中：
$（employee-tpl）。append（HTMLtemplate（context））
传递一个未定义函数和一个未定义变量（上下文）。
context 应该包含您在您的HandlebarJS模板中定义的参数
< a href =＃map / {{this.id}}>在地图上查看< / a>在你的情况下，
HTMLTemplate 是 EmployeeView.template 它持有HandlebarJS编译模板：它是一个函数，它接收上下文变量的参数（或者可能是 employee 变量？）
如果我知道了，你的代码应该是：
var EmployeeView = function（employee）{
this.render = function（）{
$（'body'）。append （this.el）;
//在新的div中，把Handlebars模板与雇员的数据
this.el.html（EmployeeView.template（employee）））。ready（function（）{
var mapOptions = {
center：new google.maps.LatLng（-34.397,150.644），
zoom：8
};
var map = new google .maps.Map（document.getElementById（map-canvas），mapOptions）;
}）;
返回此;
};
this.initialize = function（）{
this.el =。$（< / div>）;
window.localStorage.removeItem（'paramId'）;
console.log（'removed'）;
window.localStorage.setItem（'paramId'，employee）;
console.log（'added'+ employee.id）;
};
this.initialize（）;
$ b EmployeeView.template = Handlebars.compile（$（＃employee-tpl）。html（））;
我认为您必须将 employee 传递给因为我在模板中看到 first_name 和 last_name 。
So referring to the original problem I have here Google Maps Javascript V3 Uncaught TypeError: Cannot read property 'offsetWidth' of null and after doing a lot of googling, I have found a solution which I thought would be workable which is this How to append multiple Google Maps areas to divs using Handlebars.
However, I have implemented mine in the following way
var EmployeeView = function(employee){
this.render = function(){
$('body').append(this.el);
// inside the new div, put the Handlebars template, with the data from the employee
this.el.html(EmployeeView.template(employee)).ready( function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});
return this;
};
this.initialize = function(){
this.el=$("</div>");
window.localStorage.removeItem('paramId');
console.log('removed');
window.localStorage.setItem('paramId',employee);
console.log('added ' + employee.id);
};
this.initialize();
}
EmployeeView.template = Handlebars.compile($("#employee-tpl").html());
Not sure if thats the right way of 'referring' to that solution but now, whenever I run the page, the following error is thrown Uncaught ReferenceError: context is not defined
Anyone got any ideas? and to add, my html is as follows
<body>
<script id="employee-tpl" type="text/x-handlebars-template">
<div class='details'>
<img class='employee-image' src='img/{{firstName}}_{{lastName}}.jpg' />
<ul>
<li><a href="#map/{{this.id}}">See on map</a></li>
<li>Share with friends</li>
<li><div id="map-canvas"/></li>
</ul>
<script src="lib/iscroll.js"></script>
<script src="lib/handlebars.js"></script>
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="js/storage/cafe-memory-store.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?APIKEY&sensor=true"></script>
<script src="js/MapView.js"></script>
<script src="js/EmployeeView.js"></script>
<script src="js/HomeView.js"></script>
<script src="js/main.js"></script>
</body>
In this line:
$("employee-tpl").append(HTMLtemplate(context))
You are passing an undefined function and one undefined variable (context).
context should contain he id parameter you defined in your HandlebarJS template to be replaced
<a href="#map/{{this.id}}">See on map</a>
HTMLTemplate in your case is EmployeeView.template which holds the HandlebarJS compiled template: it is a function that receives as arguments the context variable ( or maybe the employee variable?)
If I got it right your code should be:
var EmployeeView = function(employee){
this.render = function(){
$('body').append(this.el);
// inside the new div, put the Handlebars template, with the data from the employee
this.el.html(EmployeeView.template(employee))).ready( function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});
return this;
};
this.initialize = function(){
this.el=.$("</div>");
window.localStorage.removeItem('paramId');
console.log('removed');
window.localStorage.setItem('paramId',employee);
console.log('added ' + employee.id);
};
this.initialize();
}
EmployeeView.template = Handlebars.compile($("#employee-tpl").html());
I think you have to pass employee to the template because I saw first_name and last_name in the template.
这篇关于上下文未定义JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
