Введение в шаблонизатор Handlebars
Инструменты

Введение в шаблонизатор Handlebars

Использование шаблонизатора на стороне клиента просто необходимо при разработке SinglePage-приложений с несколькими представлениями, если ваше приложение является интерактивным и активно отвечает на действия пользователя, наконец, если вы просто хотите отделить разметку от кода, сделать процесс отображения данных более удобным, а код понятным и простым для сопровождения.

Рассмотрим пример формирования HTML из данных без использования шаблонизатора:


bookListHtml = '<ul>';
books.forEach(function(book) {
    bookListHtml += '<li class="book">' 
        + '<a href="/' + book.code + '">' + book.title 
        + ' Author: ' + book.author + '</a></li>';
});

bookListHtml += '</ul>';
console.log(bookListHtml);

Очень часто такой код ведет к дублированию, не говоря уже о том, что поддержка и доработка его становится настоящим испытанием с ростом приложения.

Современное обилие JavaScript-шаблонизаторов позволяют выбрать любой в зависимости от предпочтений, скорости рендеринга, зависимостей, возможностей и т.д. В статье мы начнем знакомство с довольно популярным, быстрым и мощным шаблонизатором — Handlebars.js, который имеет ряд интересных особенностей и тонкостей.

О Handlebars

Handlebars.js — это клиентский шаблонизатор для JavaScript (однако ничего не мешает использовать его на стороне сервера). Он принимает на вход любую строку, состоящую из HTML-тегов и специальных выражений и компилирует их в функцию JavaScript. Эта функция в свою очередь принимает один параметр — объект данных и возвращает строку HTML, где определенные свойства объекта с данными уже вставлены в нужные места шаблона.

Handlebars является одним из наиболее популярных, быстрых и многофункциональных шаблонизаторов для JavaScript. Он практически не позволяет добавлять логику и произвольный JavaScript в шаблоны (кроме циклов и условных выражений, о которых мы поговорим чуть ниже), тем самым он как бы «заставляет» разработчика содержать логику отдельно от разметки.

Handlebars используют такие JavaScript-фреймворки, как Meteor.js, Derby.js, Ember.js, также с ним отлично взаимодействуют и другие фреймворки, например Backbone.js.

Использование Handlebars.js

Чтобы начать использовать Handlebars в своем проекте, необходимо подключить файл handlebars.js. Самый простой способ определения шаблона Handlebars — внедрение его непосредственно на страницу внутри тегов <script>.


<script id="header" type="text/x-handlebars-template">
    <div>Title: {{title}}</div>
</script>

Переменные шаблона, а также выражения заключаются в двойные фигурные скобки {{...}}. Данные в шаблон передаются в виде обычного объекта, переменным шаблона соответствуют свойства этого объекта. И наконец, HTML-структура с внедренными данными формируется функцией Handlebars.compile().

Рассмотрим, пример:


<script id="book" type="text/x-handlebars-template">
     <h2>{{bookTitle}}</h2>
     <div>Author: {{bookAuthor}}</div>
</script>

// Инициализируем объект с данными
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.js

Выражения Handlebars, как мы уже говорили, заключаются в двойные фигурные скобки. Выражением может быть как переменная, так и хелпер — предварительно определенная функция, результат которой будет вставлен в шаблон.

Также Handlebars поддерживает несколько встроенных хелперов, или блоков, каждый из которых открывается символами «{{#», а закрывается символами «/}}». Про встроенные хелперы мы еще поговорим подробнее, примером такого блока может служить блок if:


{{#if someValueI}} 
Content 
{{/if}}

Комментарии Handlebars заключаются в символы {{! }} (ну и конечно же, вы можете использовать обычные HTML-комментарии).


{{! Comment content }}

Если свойство объекта данных в свою очередь тоже является объектом, можно вставлять в шаблон значения его свойств через точку, например:


// Объект с данными
var data = { name: { firstName: 'John', lastName: 'Smith' } }

// Шаблон
<div>{{name.firstName}}</div>

Если свойство объекта данных является массивом, можно реализовать вывод элементов массива с помощью цикла each:


var data = { 
    groupName: 'Customers', 
    users: [
      { name: { firstName: 'John', lastName: 'Smith' }}, 
      { name: { firstName: 'Thomas', lastName: 'Anderson' }}
    ]
};

<script id="users-template" type="x-handlebars-template">
    {{#each users}}
        <li>
            {{name.firstName}} {{name.lastName}} is in the {{../groupName}} group.
        </li>
    {{/each}}
</script>

На пример выше стоит обратить особое внимание. Здесь при заходе в цикл меняется объект данных (в терминах Handlebars он называется контекстом). Вернуться в родительский контекст позволяет выражение «../».

Handlebars экранирует любые HTML-строки, переданные в шаблон. Чтобы вывести исходный HTML, необходимо использовать тройные фигурные скобки {{{ ... }}}.

Заключение

В статье мы рассмотрели только базовый синтаксис Handlebars.js, необходимый для того, чтобы начать его использовать. На самом деле, этот шаблонизатор имеет массу возможностей, о которые мы поговорим в следующих статьях: подробнее рассмотрим блоки, пользовательские хелперы и партиалы, прекомпиляцию шаблонов и др.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться