Создание собственных хелперов в Handlebars.js
Инструменты

Создание собственных хелперов в Handlebars.js

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

Пользовательские хелперы должны быть зарегистрированы до того, как будет использован шаблон. Различают два типа пользовательских хелперов: хелперы-функции и хелперы-блоки.

Пользовательские хелперы-функции

Прежде чем использовать хелпер в шаблоне, его необходимо зарегистрировать с помощью функции Handlebars.registerHelper(). Первый параметр этой функции — название хелпера, а второй — функция от произвольного количества параметров. Результат выполнения этой функции будет выведен в шаблоне в том месте, где был вызван хелпер.

Пример хелпера-функции:


Handlebars.registerHelper('prize', function(place) {
    if (place == 1) {
        return 'Gold';
    } else if (place == 2) {
        return 'Silver';
    } else if (place == 3) {
       return 'Bronze';
    } else {
        return 'No prize';
    }   
});

Вызов хелпера-функции в шаблоне аналогичен обычному выражению Handlebars:


<script id="prize-template" type="x-handlebars-template">
    {{prize place}}
</script>

Пользовательские хелперы-блоки

Хелперы-блоки аналогичны встроенным, выводятся в шаблоне с помощью {{# ... }} ... {{/ ...}}. При регистрации хелпера-блока, коллбэк-функция, помимо основных параметров имеет параметр — объект options, который содержит следующие свойства:

  • options.fn — метод fn принимает объект, переданный в хелпер, и использует его в качестве контекста внутри блока. Если вы хотите передать в блок текущий контекст — можно использовать this.
  • options.inverse — используется как else в любом хелпере-блоке. Чтобы иметь восможность использовать блок {{else}} в пользовательском хелпере, необходимо вызвать метод options.inverse при определенных условиях.
  • options.hash — хелпер-блок может принимать не только строки или переменные на вход, но и пары «ключ-значение», разделенные пробелами. В этом случае, переданные параметры сохраняются в объекте options.hash.

Рассмотрим пример хелпера-блока: нам необходимо выводить приветствие для авторизованного пользователя в зависимости от пола в зависимости от пола и возраста пользователя, если пользователь не авторизован — должно выводится предложение авторизоваться.


Handlebars.registerHelper('greeting', function(data, options) {
    var salutation = (data.gender === 'male') ? 'Mr. ' : 'Ms. ',
        greeting, template;

    // Если пользователь не авторизован - отображаем блок else
    if (!data.loggedIn) {
        return options.inverse(data);
    }

    // Если пользователь авторизован - формируем приветствие
    if (age > 25) {
       greeting = 'Hello, ' + salutation + data.name + '.';
    } else {
       greeting = 'Hey, ' + data.name + '.';
    }

    // Контекстом становится новый объект
    template = options.fn({ greeting: greeting });
    return template;
});

Вызов хелпера аналогичен встроенному блоку Handlebars:


<script id="welcome-template" type="x-handlebars-template">
    {{#greeting user}}
        <div>{{greeting}}</div>
    {{else}}
        <div>Please, Log In</div>
    {{/greeting}}
</script>

Пример передачи в хелпер нескольких параметров:


{{#userHelper firstName='John' lastName='Smith'}}
    Content
{{/userHelper}}

Handlebars.registerHelper('userHelper', function(data, options) {
    console.log(options.hash);
});

Заключение

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

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