Как использовать 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.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 20

    0
    Handlebars весьма шустрый инструмент. Есть тест, сравнивающий популярные шаблонизаторы .
    Но я все же остаюсь на шаблонизаторе встроенном в underscore
      0
      Если прекомпилить шаблоны, то разница в скорости нивелируется — можно просто выбирать шаблонизатор на свой вкус и цвет.
        0
        это сравнение скомпиленных шаблонов.
          0
          Тест на jsperf как раз и показывает, что разницы нет. Не должен какой-то мнимый выигрыш в скорости быть критерием выбора шаблонизатора (оговорюсь: если задача — рендерить по 1000 шаблонов на каждой странице, и не должно тормозить на android 2.1, то на скорость шаблонизатора можно смотреть. Но всё равно адски тормозить при этом будет не рендер шаблонизатора).
            0
            Не должен какой-то мнимый выигрыш в скорости быть критерием выбора шаблонизатора

            Я об этом и не говорил. Но если нет особых предпочтений, зачем например брать jsRender, который если верить тесту — проигрывает остальным?
              0
              Но если нет особых предпочтений, зачем например брать jsRender, который если верить тесту — проигрывает остальным?

              Надо прикинуть, нужен ли embedded javascript, посмотреть простоту рендера тех же шаблонов на сервере (если нужно), размеры и активность сообществ, качество документации, количество зависимостей и выбрать в итоге то, что больше подходит для поставленных целей. Только полный обзор может сказать, что какой-нибудь jsRender проигрывает остальным.
      –1
      Показалось что это php-шный smarty. Надо попробовать, уже устал от генерации тупым out+=«нечто» и затем document.getElementById(«smth»).innerHTML=out… Оно конечно работает, но не красиво, не удобно и постоянно почти одинаковый код.
      Оно работает как standanlone? В примерах вижно jQuery.
        0
        А есть ли возможность использовать один и тот же Handlebars шаблон на клиенте и сервере в NodeJS/express.?
          0
            0
            мне кажется это чуть ли не ключевая фишка ноды, если сразу писать с расчетом на повторное использование — можно сократить вполне много времени. Совершенно точно сюда входит валидация и шаблонизация
            +1
            Если вы внимательнее присмотритесь, то jQuery используется только для вставки скомпилированного шаблона. Вы вольны использовать что угодно для этой цели — хоть Vanilla JS
              0
              Прошу прощения, просто как только вижу $ сразу думаю — ага, JS-а не будет, только обертка.
            +5
            Да это разве статья? Handlebars — очень мощный шаблонизатор со своими тонкостями и плюсами. То что вы написали — умеет любой простейший шаблонизатор вроде iCanHaz, Mustache и прочих. Где подробности и особенности именно этого шаблонизатора?
              0
              Не хватает описания возможностей расширения хелперами, процесс прекомпиляции, оптимизации — там все очень классно. Круче хендлбарсов, мне кажется, только dust.
              0
              Handlebars эскейпит данные сам?
                0
                HTML — да. Можно настраивать через {{{ или SafeString.
                +1
                А вот меня, как php разработчика очень привлекает twigjs/swig. Синтаксис повторяет популярный twig, синтаксис которого взят из django, на сколько мне известно.
                  0
                  Синтаксис повторяет популярный twig, синтаксис которого взят из django

                  > Синтаксис повторяет популярный twig, синтаксис которого взят из smarty, синтаксис которого взят из django

                  Но да, вы правы, когда писал на PHP — Twig очень нравился
                  0
                  Вот еще от mozilla jlongster.github.io/nunjucks
                    0
                    Handlebars — это дополненный Mustache (полностью обратно совместимый), причем изначальный мусташе значительно меньше весит.

                    Я также советую всем, не пользовавшимся logic-less шаблонизаторами, осознавать то, что это ну вообще не smarty. Это не критика, а лишь предупреждение. Тут нет if/elseif/elseif (только if), нет for (только foreach), нет математики, нет переменных, в мусташе нет даже хелпер-функций. Банальный вывод даты потребует предварительно отформатированную дату заранее положить в модель, а отрисовать какойнить select в форме будет и того веселее

                    Only users with full accounts can post comments. Log in, please.