Произвольное условие if в шаблоне Handlebars
Инструменты

Произвольное условие if в шаблоне Handlebars

Handlebars — это один из наиболее популярных, быстрых и многофункциональных шаблонизаторов для JavaScript. Его особенность заключается в том, что он практически не позволяет использовать произвольный JavaScript в шаблонах в отличие от того же шаблонизатора Underscore.js. В случаях, когда все же нужна кастомная логика, на помощь приходят пользовательские хелперы. И одна из наиболее частых таких ситуаций — необходимость задать произвольное условие if в шаблоне Handlebars.

Хелперы if и unless в Handlebars

Если условие достаточно простое, его можно использовать в стандартном блоке if:


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

Или unless:


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

Такие хелперы могут только проверять истинность одного переданного параметра. Подробнее про стандартные блоки в Handlebars можно прочесть в статье.

Произвольные условия

При необходимости проверять в шаблоне более сложные условия, можно написать собственный хелпер. Пример такого хелпера представлен ниже:


Handlebars.registerHelper('cond', function (expression, options) {
    var fn = function() {}, result;
    try {
        fn = Function.apply(this, ['return ' + expression + ' ;']);
    } catch(e) {}
    try {
        result = fn.bind(this)();
    } catch(e) {}

    return result ? options.fn(this) : options.inverse(this);
});

Использовать такой хелпер можно так:


<div class="user-data">
    {{#cond " this.userLogged && this.user.age > 18 "}}
        Welcome, {{firstName}} 
    {{/cond}}
</div>

Прекрасно! Теперь мы можем использовать любое произвольное условие в шаблоне. Но давайте разберемся, что происходит в коде самого хелпера.

Как мы уже знаем, пользовательские хелперы-блоки принимают два парамтера: собственно данные и объект options. Объект options содержит две функции:

  • options.fn — отображает содержимое блока
  • options.inverse — отображает содержимое блока else, если таковой есть.

Нам нужно проверить истинность переданного выражения. Для этого мы создаем новую функцию с помощью объекта Function. Эта функция будет просто возвращать наше переданное выражение expression.

Далее мы пытаемся выполнить эту функцию, но в качестве this передаем текущий контекст хелпера c помощью функции bind. Таким образом, функция вернет нам true или false, в зависимости от того, истинно или нет значение переданного выражения в контексте хелпера.

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

И наконец, в зависимости от получившегося результата, мы отображаем либо содержимое блока хелпера, либо содержимое блока else.

Заключение

Возможность создавать пользовательские хелперы делает Handlebars действительно крутым. Вся логика обработки данных выносится внутрь хелпера, а код шаблонов становится чистым и понятным. И на примере хелпера для произвольного условия мы в этом убедились.

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