车把模板未呈现答案

【问题标题】：Handlebars Template is not rendered车把模板未呈现
【发布时间】：2015-10-22 10:52:49
【问题描述】：

嘿，我对 Handlebars.js 完全陌生，对 JavaScript 本身也几乎陌生。所以我尝试通过以下 tut：http://coenraets.org/blog/phonegap-tutorial/

我完成了第 5 部分并想在浏览器中测试应用程序。但是页面是空白的。浏览器会自己识别handlebars.js并自动渲染handlebars模板吗？或者为什么我会收到一个空白页？

我希望这些问题不是基本的，但是我不知道如何进行或我的错误在哪里。 index.html：

<html>
<body>
    <script id="home-tpl" type="text/x-handlebars-template">
        <div class='header'><h1>Home</h1></div>
        <div class='search-bar'><input class='search-key' type="text"/></div>
        <ul class='employee-list'></ul>
    </script>



    <script id="employee-li-tpl" type="text/x-handlebars-template">
        {{#.}}
        <li><a href="#employees/{{this.id}}">{{this.firstName}} {{this.lastName}}<br/>{{this.title}}</a></li>
        {{/.}}
    </script>


    <script src="lib/jquery-1.8.2.min.js"></script>
    <script src="js/storage/memory-store.js"></script>
    <script src="js/main.js"></script>
    <script src="lib/handlebars.js"></script>

</body>

main.js：

var app = {

findByName: function() {
    var self = this;
    this.store.findByName($('.search-key').val(), function(employees) {
        $('.employee-list').html(self.employeeLiTpl(employees));
    });
},

initialize: function() {
    var self = this;
    this.store = new MemoryStore(function() {
        self.renderHomeView();
    });
    this.homeTpl = Handlebars.compile($("#home-tpl").html());
    this.employeeLiTpl = Handlebars.compile($("#employee-li-tpl").html());
},

renderHomeView: function() {
    $('body').html(this.homeTpl());
    $('.search-key').on('keyup', $.proxy(this.findByName, this));
},

showAlert: function (message, title) {
    if (navigator.notification) {
        navigator.notification.alert(message, null, title, 'OK');
    } else {
        alert(title ? (title + ": " + message) : message);
    }
},

};

app.initialize();

我在 main.js 中得到以下错误： ln。 15: Uncaught ReferenceError: Handlebars is not defined ln 20. :Uncaught TypeError: Object # has no method 'homeTpl'

亲切的问候，乱七八糟

【问题讨论】：

控制台是否有任何错误？
我在文本编辑器记事本++中编辑它....我必须以某种方式构建它吗？我认为浏览器会使用 javascript 解释器或类似的东西来处理脚本？
:) 您在浏览器控制台中是否遇到任何错误？
发布您的代码总是有帮助的。
我在帖子中包含了代码和错误消息。

标签： javascript html handlebars.js

【解决方案1】：

将handlebars.js 移到main.js 脚本标签上方。

【讨论】：

所以 main.js 需要每个 .js 它必须是最后一个？
在这种情况下，您的 main.js 正在尝试使用尚不存在的把手方法/对象，因为它在您的 main.js 脚本标记之后被包含/执行。大多数浏览器会异步触发这些请求，因此每个文件的加载时间可能会有所不同，这就是人们在执行代码之前等待文档加载的原因。

【解决方案2】：

我做了上面的改变……这看起来很合乎逻辑。但是，上述解决方案不起作用。

我在下面添加了

this.homeTpl = Handlebars.compile($("#home-tpl").html());
this.employeeLiTpl = Handlebars.compile($("#employee-li-tpl").html());

在 renderHomeView 函数中......对我来说很好...... :)

renderHomeView: function()  {       
    this.homeTpl = Handlebars.compile($("#home-tpl").html());
    this.employeeLiTpl = Handlebars.compile($("#employee-li-tpl").html());
    $('body').html  ( this.homeTpl());
    $('.search-key').on('keyup', $.proxy(this.findByName, this));   
}

【讨论】：