Pull to refresh

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

JavaScript
Sandbox
Tutorial
В настоящее время веб-сайты все больше используют 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.
Tags:javascript library
Hubs: JavaScript
Total votes 30: ↑19 and ↓11 +8
Views59.1K

Comments 20

Only those users with full accounts are able to leave comments. Log in, please.

Popular right now

JavaScript разработчик
from 180,000 ₽SportrecsМоскваRemote job
JavaScript разработчик
from 75,000 to 180,000 ₽WebLab TechnologyRemote job
Javascript разработчик
from 160,000 to 220,000 ₽ArtezioМосква
Разработчик JavaScript
from 60,000 to 180,000 ₽АВК-КоммьюникейшнзМосква
Javascript разработчик
from 2,800 to 3,300 $ArtezioМогилев