上下文未定义 JavaScript答案

【问题标题】：context is not defined JavaScript上下文未定义 JavaScript
【发布时间】：2013-12-04 10:48:02
【问题描述】：

所以参考我在这里遇到的原始问题Google Maps Javascript V3 Uncaught TypeError: Cannot read property 'offsetWidth' of null，在进行了大量谷歌搜索之后，我找到了一个我认为可行的解决方案，即How to append multiple Google Maps areas to divs using Handlebars。

但是，我通过以下方式实现了我的

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());

不确定这是否是“引用”该解决方案的正确方式，但现在，每当我运行该页面时，都会引发以下错误 Uncaught ReferenceError: context is not defined

有人有什么想法吗？并补充一下，我的html如下

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

【问题讨论】：

表示变量context未定义：是不是也定义了HTMLtemplate(context)函数？否则我猜应该是EmployeeView.template。
但是提到stackoverflow.com/questions/10006898/…，它似乎不像HTMLTemplate和context是额外定义的吗？请纠正我:(
我可以在页面的代码sn-p中看到它们的定义。

标签： javascript jquery html templates handlebars.js

【解决方案1】：

在这一行：

$("employee-tpl").append(HTMLtemplate(context))

您正在传递一个undefined 函数和一个undefined 变量（context）。 context 应该包含您在要替换的 HandlebarJS 模板中定义的 id 参数

<a href="#map/{{this.id}}">See on map</a>

HTMLTemplate 在您的情况下是 EmployeeView.template，它包含 HandlebarJS 编译模板：它是一个接收 context 变量（或者可能是 employee 变量？）作为参数的函数

如果我猜对了，你的代码应该是：

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());

我认为您必须将employee 传递给模板，因为我在模板中看到了first_name 和last_name。

【讨论】：

嗨，Marco，我已经更新了我的代码，但是，它现在又抛出了另一个错误Uncaught ReferenceError: employee is not defined
按照您的建议@marcocl，它现在抛出Uncaught TypeError: Cannot read property 'offsetWidth' of null ，我知道这是由于调用此函数时未呈现div\
找不到附加模板的元素：我已经更新了答案。 ;)
嗨，Marco，非常感谢您的回答，但它仍然抛出同样的错误。我在上面的问题中更新了