可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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.

文章来源: context is not defined JavaScript

标签

脚本

maps