[Из песочницы] Как использовать Handlebars10.04.2014 08:50

В настоящее время веб-сайты все больше используют JavaScript для создания динамических интерфейсов обновляя данные и манипулируя DOM деревом. Если использовать шаблонизатор, реализующий шаблон View/Controller, код становится чище, его легче модифицировать.Используем Handlebars Первое что нужно сделать — подключить Handlebars: Handlebars генерирует HTML из JSON данных. Для того, чтобы браузер распознал шаблон Handlebars, мы должны присвоить ему тип text/x-handlebars-template, а также ID, чтобы ссылаться на него позже. Разметка для создания шаблона, который будет получать имя и выводить HTML может выглядеть следующим образом:

Имя будет получено из JSON и подставлено вместо {{name}}. Далее необходимо указать источник данных: var data = { name: 'John Doe' }, Мы создали простой JSON объект, содержащий одно свойство name со значением 'John Doe', которое мы хотим поместить в HTML. Но прежде нам нужно скомпилировать код шаблона и присоединить его к классу .updates в HTML, передав JSON объект data как параметр:

var template = Handlebars.compile ($('#template').html ()); $('.updates').append (template (data)); Немного усложним задачу, добавив больше свойств в JSON объект data:

var data = { name: 'Jane Doe', update: 'Just Made my Breakfaast', from: 'Web', location: 'Canada' }, И модифицируем шаблон:

{{name}}

{{{update}}}

Sent From: {{from}} — In: {{location}}

Отлично, но что если мы хотим добавить более одного пользователя в JSON объект?

var data = { updates: [ { name: 'Jane Doe', update: 'Just Made my Breakfaast', from: 'Web', location: 'Canada' }, { name: 'John Doe', update: 'What is going on with the weather?', from: 'Phone', } ]}, Чтобы теперь обойти массив нужно обернуть HTML выражением each:

{{#each updates}}

{{name}}

{{{update}}}

Sent From: {{from}} — In: {{location}}

{{/each}} Есть одна проблема — у нас нет местоположения John Doe, и чтобы не выводить пустую строку можно включить условие if:

{{#each updates}}

{{name}}

{{{update}}}

Sent From: {{from}} {{#if location}}  — In: {{location}} {{/if}}

{{/each}} Также можно показать, что пользователь не указал местоположение:

{{#if location}}  — In: {{location}} {{else}}  — Location not provided by the user {{/if}} Заключение В статье покрыта лишь малая часть возможностей Handlebars. Handlebars — отличный вариант для приложений с постоянно изменяющимися данными. Настоятельно рекомендую посетить tryhandlebarsjs.com.Данная статья является переводом How to use Handlebars.

© Habrahabr.ru