Шаблон руля не отображается

0

Привет, я совершенно новый для Handlebars.js и почти новый для самого JavaScript. Поэтому я попытался проделать следующую работу: http://coenraets.org/blog/phonegap-tutorial/

Я завершил часть 5 и хотел протестировать приложение в браузере. Но страница ist blank. Распознает ли браузер 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: Uncaught ReferenceError: Handlebars не определен ln 20.: Uncaught TypeError: Object # не имеет метода 'homeTpl'

С уважением, Снафу

  • 0
    Вы получаете какие-либо ошибки в консоли?
  • 0
    Я редактирую его в текстовом редакторе Notepad ++ .... я должен как-то его собрать? Я думал, что браузер будет обрабатывать сценарий с помощью интерпретатора JavaScript или что-то в этом роде?
Показать ещё 3 комментария
Теги:
handlebars.js

2 ответа

2
Лучший ответ

Двигайте handlebars.js над вашим main.js тегами сценария.

Поделиться
  • 0
    так как main.js нужен каждый .js, он должен быть последним?
  • 0
    В этом случае ваш main.js пытается использовать метод / объект handlebar, который еще не существует, потому что он включается / выполняется после тега сценария main.js. Большинство браузеров запускают эти запросы асинхронно, поэтому время загрузки файла может варьироваться, поэтому люди ждут загрузки документа перед выполнением кода.
0

Я сделал вышеупомянутое изменение... которое казалось вполне логичным. Однако указанное выше решение не сработало.

Я добавил ниже

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));   
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню