Question

嘿，我完全不熟悉Handlebars.js，而且几乎是JavaScript本身的新手。所以我尝试了以下内容：http://coenraets.org/blog/phonegap-tutorial/

我完成了第5部分，并希望在浏览器中测试该应用。但该页面是空白的。浏览器是否自己识别handlebars.js并自动呈现把手模板？或者为什么我会收到空白页？

我希望问题不是基本的，但我不知道如何继续或我的错误所在。的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：未捕获的ReferenceError：未定义把手 20：未捕获的TypeError：对象＃没有方法'homeTpl'

亲切的问候，一团糟

Answer 1

将handlebars.js移到main.js脚本代码上方。

Answer 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));   
}

手柄模板未呈现

2 个答案: