Шаблонизатор Hogan.js

Hogan.js представляет собой движок шаблонизации 3.4k JS, разработанный в Twitter. Используйте его в качестве упаковщика цифровых пакетов для заблаговременной компиляции, или подключите его к вебстранице чтобы ваш браузер смог обработать динамические шаблоны.

Начало работы с Hogan.js

Если вы работаете с Node.js, то используйте команду npm для добавления пакета Hogan:

$ npm install hogan.js

В качестве альтернативного метода, можно подключить hogan.js к вашей web-странице с помощью тега script:

<script src="hogan-3.0.2.js"></script>

<!-- подключаем hogan -->
<script src="/js/hogan.js"></script>

<!-- подключаем скомпилированные сервером ваши шаблоны -->
<script src="/js/my-templates.js"></script>

<!-- рендерим шаблоны -->
<script>
  var context = { variable: 'myVariable' };
  var partial = { partial: myPartial };
  var template = myTemplate.render(context, partial);
  document.body.innerHTML = template;
</script>

Шаблоны в Hogan.js

Hogan.js был разработан с зависимостью тестового пакета mustache, поэтому все, что справедливо для шаблонов в соответствии со сказанным здесь, справедливо для hogan.js.

Это означает, что вы получаете переменные, разделы, лямбда-значения, частные производные, фильтры и все остальное вы ожидали от шаблонизатора, - только гораздо, гораздо быстрее.

<div class="timeline">
<!-- load more button -->
<button>{{message}}</button>
<!-- объект tweet -->
   {{#tweets}}
   {{> tweet}}
   {{/tweets}}
</div>

Компиляция

Используйте hogan.compile() для предварительной компиляции своих шаблонов в JS.

Лучше всего всегда подавать шаблоны в предварительно скомпилированном виде (а не в виде необработанных шаблонов), поскольку парсинг занимает больше всего времени.

// требуется hogan
var hogan = require("hogan.js");
// задаем шаблон
var template = "Hello {{world}}!";
// компилируем шаблон
var hello = hogan.compile(template);

Рендеринг

После компиляции, вызовите метод render() с с контекстом и частными объектами по выбору.

При предоставлении частных объектов вы можете предварительно скомпилировать их, или передавать строковые шаблоны.

// требуется hogan
var hogan = require("hogan.js");
// компилируем шаблон
var template = hogan.compile("@{{name}}");
var team = ['dhg', 'fat', 'jimio', 'nickgreen', 'sayrer'];
team.map(function (twitterer) {
// отрисовать контекст на шаблоне
return template.render({name: twitterer });
});
// Получим "Отследить: @dhg @fat @jimio @nickgreen @sayrer!"
console.log('Отследить: ' + team.join(' ') + '!');

Вы, наверняка, удивитесь, но мы уже почти все изучили, что надо. Давайте рассмотрим еще один пример посложнее, прежде чем перейти к утилите Hulk. Откройте ваш любимый текстовый редактор и напишите в нем следующий HTML-код:

<header>Тестируем Hogan.js</header>

<hr>

<div id="contenedor" class="group"></div>

<script id="listStampsScript" type="text/x-hogan-template">

<div class="group">
<ul class="listStamps">
    {{#stamps}}
    <li class="listStamps__portada">
      <a href="#" title="{{title}}">
         <img src="{{cover}}" alt="{{title}}" />
      </a>
      <ul class="statsTabs">
         <li>
            <a class="statsTabs__a" href="#">#{{number}}
               <span class="statsTabs__span">Номер</span>
            </a>
         </li>
         <li>
            <a class="statsTabs__a" href="#">{{place}}
               <span class="statsTabs__span">Место</span>
            </a>
         </li>
      </ul>
   </li>
   {{/stamps}}
</ul>
</div>    

</script>

Теперь, подключим hogan.js и, превозмогая дрожь в руках, напишем наш скрипт для шаблонизатора Hogan.js:

var cont = document.getElementById("contenedor"),
  data = {
    stamps: [{
      number: 1,
      title: "Мишка",
      place: "Сочи 2014",
      cover: "stamp1.png"
    }, {
      number: 2,
      title: "Леопард",
      place: "Сочи 2014",
      cover: "stamp2.png"
    }]
  },
  source = document.getElementById("listStampsScript").innerHTML,
  template = Hogan.compile(source),
  output = template.render(data);

console.log(output);

cont.innerHTML=output;

А теперь, давайте посмотрим, что у нас получилось. Работает! Но выглядит, конечно, жутко. Давайте облагородим наш пример с помощью CSS стилей, а то как-то перед работодателями неудобно. Это ведь мы тоже умеем:

h1 {font: normal 18px/1 arial}

.listStamps { 
   margin: 5%; 
}
.listStamps__portada {
   float:left;
   margin: 0 5% 5% 0;
}
.listStamps__img {
   max-width: 100%;
   max-height: 300px;    
}

/* Clear FIX */
.groupːafter {
   content:"";
   display:block;
   clear:both;
}

/* инфо-блок */
.listStamps li {
   float: left;
   margin: 0 0 0 10px;
   padding: 0 0 0 10px;
   list-style:none;
   
}

.statsTabs,
.listStamps liːfirst-child {
   margin: 0;
   padding: 0;
   border: none;
}

.statsTabs li {border-left: 1px solid #ccc;}

.statsTabs__a {    
   display: block;
   float: left;
   color: #2790AE;
   text-decoration:none;
   font: bold 16px/1 arial;
}
.statsTabs__span {
   display: block;
   margin-top: 2px;
   font: normal 12px/1 arial;
}

Вот, какой мы теперь имеем результат!

Hulk

Hulk представляет собой утилиту командной строки Hogan. Используйте его для того, чтобы легко компилировать свои шаблоны в файлы js.

Hulk поддерживает ✲ wilcard (даже в windows) и позволяет также вводить конкретные расширения файлов.

# текст подсказки
$ hulk
# Собрать все файлы шаблонов
$ hulk /templates/✲
# Собрать все шаблоны с расширением mustache
$ hulk /templates/✲.mustache
# Собрать только шаблон схемы
$ hulk /templates/layout.mustache