document.getElementById(#mapid) 返回 null

Question

在这里提到这个问题，context is not defined javascript

我只是抛出另一个关于 document.getElementById 返回 null 的错误的问题，即使模板已经编译。

简要背景，我正在使用车把模板，jquery，我希望 googlemap 出现在车把模板的 1 中。

我的html：

 <script id="employee-tpl" type="text/x-handlebars-template">
<div class='header'><a href='#' class="button header-button header-button-left">Back</a><h1>Gloop</h1></div>
<div class='details'>
    <img class='employee-image' src='img/{{firstName}}_{{lastName}}.jpg' />
    <h1>{{name}}</h1>
    <h2>{{address}}</h2>
    <h2><a href="tel:{{phone}}">{{phone}}</a></h2>
    <span class="location"></span>
    <ul>
        <li><div id="map-canvas"> </div></li>
    </ul>
</div>
</script>

还有我的 js

this.render = function(){

    this.el.html(EmployeeView.template(employee));
console.log(document.getElementById("map-canvas"));

};
this.initialize = function(){
    this.el=$('<div/>');

};

this.initialize();
}

EmployeeView.template = Handlebars.compile($("#employee-tpl").html());

请注意，对控制台的调用将记录 null 值，并且此 js 在我的 html 文件底部调用

<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 src="js/EmployeeView.js"></script>
<script src="js/main.js"></script>
</body>
</html>

我的理解是，我的编译将呈现 div，然后应该可以看到它，但事实并非如此。有谁知道为什么？

Answer 1

这就是你所有的代码吗？如果我将它添加到 JS 中，它可以工作.. 但很难看到你在追求什么。

var source = $("#employee-tpl").html(); 
var template = Handlebars.compile(source); 
var data = { //your data here }
$('body').append(template(data));