Как использовать Handlebars

В настоящее время веб-сайты все больше используют JavaScript для создания динамических интерфейсов обновляя данные и манипулируя DOM деревом. Если использовать шаблонизатор, реализующий шаблон View/Controller, код становится чище, его легче модифицировать.

Используем Handlebars

Первое что нужно сделать — подключить Handlebars:

<script src="js/handlebars.js"></script> 

Handlebars генерирует HTML из JSON данных. Для того, чтобы браузер распознал шаблон Handlebars, мы должны присвоить ему тип text/x-handlebars-template, а также ID, чтобы ссылаться на него позже. Разметка для создания шаблона, который будет получать имя и выводить HTML может выглядеть следующим образом:

<ul class="updates">    <script id="template" type="text/x-handlebars-template">       <li> 	  <h2>{{name}}</h2>       </li>    </script> </ul> 

Имя будет получено из 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'    }, 

И модифицируем шаблон:

<li>    <h2>{{name}}</h2>    <p>{{{update}}}</p>    <span>       Sent From: {{from}} - In: {{location}}    </span> </li> 

Отлично, но что если мы хотим добавить более одного пользователя в 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}}     <li>        <h2>{{name}}</h2>        <p>{{{update}}}</p>        <span>           Sent From: {{from}} - In: {{location}}        </span>     </li> {{/each}} 

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

{{#each updates}}    <li>       <h2>{{name}}</h2>       <p>{{{update}}}</p>       <span>          Sent From: {{from}} 			          {{#if location}} 	    - In: {{location}}</span>          {{/if}}      </span>    </li> {{/each}} 

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

{{#if location}}    - In: {{location}}</span> {{else}}    - Location not provided by the user</span> {{/if}} 

Заключение

В статье покрыта лишь малая часть возможностей Handlebars. Handlebars — отличный вариант для приложений с постоянно изменяющимися данными. Настоятельно рекомендую посетить tryhandlebarsjs.com.

Данная статья является переводом How to use Handlebars.