Пытаюсь понять шаблонизатор Handlebars для JavaScript

@alex_7 · Регистрация: 17.03.2016

Студворк — интернет-сервис помощи студентам

Привет. Нагуглил вот эту статью:
http://getinstance.info/articl... andlebars/

Но у меня самый первый пример сразу же не работает. Помогите понять откуда у меня ошибка, вроде пишу как в руководстве.

Файл index.html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title> Handlebars Example </title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery.js"> </script> 
    <script type="text/javascript" src="js/handlebars.js"> </script> 
    <script type="text/javascript" src="js/main.js"> </script>          
</head>       
<body>
    <script id="book" type="text/x-handlebars-template">
             <h2> {{bookTitle}} </h2>
             <div> Author: {{bookAuthor}} </div>
    </script>
</body> 
</html>

Файл main.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
// Инициализируем объект с данными
var book = { bookTitle: '2001: A Space Odyssey', bookAuthor: 'Arthur Clarke' };
 
// Получаем шаблон
var templateScript = $('#book').html();
 
// Функция Handlebars.compile принимает шаблон и возвращает новую функцию
var template = Handlebars.compile(templateScript);
 
// Формируем HTML и вставляем в документ
$(document.body).append(template(book));

В итоге в консольке Хрома вот такая ошибка:

Пытаюсь понять шаблонизатор Handlebars для JavaScript

@Padimanskas · 23.02.2017, 16:49

alex_7, console.log(templateScript)

@alex_7 · 24.02.2017, 05:43 **[ТС]**

Сообщение от Padimanskas

console.log(templateScript)

не, не помогло((( та же ошибка остаётся.
а может надо локальный сервер использовать? а то я просто файл index.html открываю браузером.

@Padimanskas · 24.02.2017, 13:12

alex_7, Все работает. Посмотрите и убедитесь в этом. Код из фиддла не вставляю, потому что он ваш.

@alex_7 · 24.02.2017, 20:33 **[ТС]**

Сообщение от Padimanskas

Все работает. Посмотрите и убедитесь в этом. Код из фиддла не вставляю, потому что он ваш.

может у меня какая-нибудь не та версия Handlebars ? может версию надо другую найти?

Подскажите пожалуйста где искать ошибку? Я этот код вставляю к себе и у меня браузер хром выдает ошибку как на скриншоте. я третий день бьюсь и не могу даже понять, в каком направлении ошибку искать((

@alex_7 · 24.02.2017, 20:35 **[ТС]**

вот такую ошибку выдаёт браузер

@alex_7 · 25.02.2017, 09:52 **[ТС]**

Люди, ау, кто нибудь понимает в шаблонизаторах?

Помогите пожалуйста

((

Добавлено через 5 минут

Сообщение от Padimanskas

Все работает. Посмотрите и убедитесь в этом. Код из фиддла не вставляю, потому что он ваш.

а если этот же код скопировать и не в фидл вставить, а к себе на комп и открыть браузером?
в таком случае он ведь ошибку выдает почему то ((

@Padimanskas · 25.02.2017, 14:01

Сообщение от alex_7

а если этот же код скопировать и не в фидл вставить, а к себе на комп и открыть браузером?
в таком случае он ведь ошибку выдает почему то ((

Так тоже работает. Вот пример handlebars-test.zip

@alex_7 · 25.02.2017, 14:25 **[ТС]**

Сообщение от Padimanskas

Так тоже работает. Вот пример handlebars-test.zip

всё, я нашёл ошибку!)) Точнее нагуглил. На del тоже кто то задавал аналогичный вопрос. Оказывается наш скрипт должен подключаться ПОСЛЕ скрипта с шаблоном, и тогда всё работает!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title> Handlebars Example </title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css">
             
</head>       
<body>
    <script id="book" type="text/x-handlebars-template">
             <h2> {{bookTitle}} </h2>
             <div> Author: {{bookAuthor}} </div>
    </script>
    
    <script type="text/javascript" src="js/jquery.js"> </script> 
    <script type="text/javascript" src="js/handlebars.js"> </script> 
    <script type="text/javascript" src="js/main.js"> </script> 
</body> 
</html>

Вот так работает!!!

Комментарий модератора

Мат на форуме запрещён! Запрещено публиковать ссылки на другие форумы, а также их пропаганда!

@alex_7 · 26.02.2017, 19:49 **[ТС]**

короче говоря, ура, всё заработало!

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	23.02.2017, 16:49
	alex_7, console.log(templateScript) 1

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	24.02.2017, 13:12
	alex_7, Все работает. Посмотрите и убедитесь в этом. Код из фиддла не вставляю, потому что он ваш. 1

@alex_7 1 / 1 / 2 Регистрация: 17.03.2016 Сообщений: 234
	24.02.2017, 20:35 [ТС]
	вот такую ошибку выдаёт браузер 0

@alex_7 1 / 1 / 2 Регистрация: 17.03.2016 Сообщений: 234
	26.02.2017, 19:49 [ТС]
	короче говоря, ура, всё заработало! 0

Опции темы

Пытаюсь понять шаблонизатор Handlebars для JavaScript

Решение