[Из песочницы] Как использовать 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.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.