Встроенные хелперы Handlebars.js
Инструменты

Встроенные хелперы Handlebars.js

Как мы уже говорили ранее, шаблонизатор Handlebars практически не позволяет вставлять произвольную логику в шаблоны. Однако он предоставляет функционал, называемый хелперами — возможность определять произвольные функции, результат выполнения которых отображается в шаблоне. Также поддерживаются так называемые блоки — встроенные хелперы, позволяющие реализовывать условия и циклы внутри шаблона. В статье мы рассмотрим встроенные блоки Handlebars.

Цикл each {{#each}}

Блок {{#each}} позволяет итеративно пройтись по элементам массива или объекта и вывести его содержимое.

Например, мы имеем следующий объект данных:


var data = { books: [
    '2001: A Space Odyssey', 
    'Foundation and Empire', 
    'Journey Beyond Tomorrow'
]};

Выведем список книг в цикле:


<script id="books-template" type="x-handlebars-template">
Books:
{{#each books}}
    <li>{{this}}</li>
{{/each}}
</script>

В результате мы получим слудеющий HTML:


<li>2001: A Space Odyssey</li>
<li>Foundation and Empire</li>
<li>Journey Beyond Tomorrow</li>

Обратите внимание, что при заходе в цикл меняется контекст выполнения — объектом данных в каждой итерации становится элемент массива. Соответственно, свойства элементов можно также выводить в цикле как переменные шаблона:


<script id="books-template" type="x-handlebars-template">
Books:
{{#each books}}
    <li>{{title}} - {{author}}</li>
{{/each}}
</script>

Блок if {{#if}}

Блок if работает в Handlebars как обычное условие, но не поддерживает произвольные логические выражения. Он проверяет истинность переданного значения и визуализирует блок, в случае, если оно истинно. Рассмотрим пример:


<div class="user-data">
{{#if userLogged}}
    Welcome, {{firstName}}
{{/if}}
</div>

В примере выше мы проверяем истинность переменной userLogged и отображаем блок приветствия. В блок if можно также проверить наличие и истинность свойства объекта, например:


<div class="user-data">
{{#if groups.length}}
    Welcome, {{firstName}}
{{/if}}
</div>

Однако блок if не позволяет использовать произвольные логические выражения. Например, код ниже вызовет ошибку:


<div class="user-data">
{{#if userAge > 18}}
    Welcome, {{firstName}}
{{/if}}
</div>

Блок else {{else}}

Блок else выполняется, если переданное в if условие ложно. Например, если пользователь авторизован (userLogged = true), выводим приветствие, в противном случае — просим авторизоваться.


<div class="user-data">
{{#if userLogged}}
    Welcome, {{firstName}}
{{else}}
    PleaseLog in.
{{/if}}
</div>

Блок unless {{#unless}}

Альтернативой блоку else может выступать блок unless. Часть шаблона, помещенная в unless выполняется в том случае, если переданная в в блок переменная ложна. Это может быть полезно, когда не нужно выводить ничего в случае истинности значения. В следующем примере мы ничего не выводим, если пользователь авторизован. А если не авторизован — просим залогиниться.


<div class="user-data">
{{#unless userLogged}}
    Please Log in.
{{/unless}}

</div>

Блок with {{#with}}

Наконец, последний блок with служит для смены контекста. Если свойство объекта данных само является объектом — можно передать его в блок with, и тогда внутри этого блока он будет выполнять роль контекста, и все его свойства можно использовать как обычные переменные шаблона. Например, объект данных имеет следующий вид:


var data = { 
    book:  {
        title: '2001: A Space Odyssey',
        author: 'Arthur Clarke'
    }
};

Чтобы использовать свойства объекта data.book как переменные шаблона, можно передать объект в блок with:


<script id="book-template" type="x-handlebars-template">
{{#with book}}
    <li>{{title}} - {{author}}</li>
{{/with}}
</script>

Заключение

В статье мы рассмотрели встроенные хелперы Handlebars.js, позволяющие реализовывать простые циклы и условия в шаблоне. Для реализации более сложной логики в Handlebars предусмотрена возможность реализации собственных хелперов.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться