Хелперы Handlebars

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

Они позволяют нам создавать повторно используемые выражения.

На сайте Handlebars есть несколько примеров хелперов блоков, но я собираюсь показать немного другие. Давайте начнем с самого простого хелпера. Он возвращает HTML сниппет.

Статический HTML хелпер

Весь код выглядит вот так, и вы можете его запустить, нажав ссылку Try!.

examples/js/handlebars_helpers_static.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script id="text-template" type="text/x-handlebars-template">
    <h3>{{greeting}}</h3>
</script>

<button id="show">Show</button>
<div id="content"></div>

<script>
Handlebars.registerHelper('greeting', function() {
    return new Handlebars.SafeString( '<i>Hello World</i>' );
});

document.getElementById('show').addEventListener('click', function () {
    var source = document.getElementById('text-template').innerHTML;
	var template = Handlebars.compile(source);
	var html = template();

    document.getElementById('content').innerHTML = html;
});

</script>

view

Хелпер это сниппет JavaScript кода. Строка (в нашем случае greeting) связана с функцией. Функция может возвращать простую строку с экранированным HTML, или может вернуть объект SafeString, который оставит строку такой, какая она есть. В нашем случае, так как мы хотим вернуть HTML сниппет, мы используем объект SafeString. Обычно такой код помещают во внешний JavaScript файл, например, чтобы использовать его в нескольких проектах.

Handlebars.registerHelper('greeting', function() {
    return new Handlebars.SafeString( '<i>Hello World</i>' );
});

Теперь у нас есть хелпер с именем greeting и мы можем использовать его в нашем коде шаблона:

    <script id="text-template" type="text/x-handlebars-template">
        <h3>{{greeting}}</h3>
    </script>

Шаблон это просто HTML сниппет с неколькими плейсхолдерами.

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

Конечно, демонстрация "Hello World" не так уж интересна, но возможно, если бы хелпер возвращал информацию о копирайте для сайта или возвращал меню, тогда он был бы более интересным.

Хендлер для ссылок

Следующий пример основан на одном примере с веб-сайта Handlebars. Он уже принимает параметр. Предполагается, что это объект JavaScript имеет атрибут url и необязательный атрибут text. Получив такой объект, этот хендлер вернет HTML ссылку, используя ссылку и текст из объекта. Если атрибут 'text' отсутствует в объекте, когда будет использован тот же URL.

Полный пример выглядит вот так:

examples/js/handlebars_helpers_link.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script id="text-template" type="text/x-handlebars-template">
    {{link home}}<br>
    {{link perlmaven}}<br>
</script>

<button id="show">Show</button>
<div id="content"></div>

<script>
Handlebars.registerHelper('link', function(obj) {
    var url  = obj.url;
    var text = obj.text;
    if (text == undefined) {
        text = url;
    }
    return new Handlebars.SafeString( '<a href="' + url + '">' + text + '</a>' );
});

document.getElementById('show').addEventListener('click', function () {
    var source = document.getElementById('text-template').innerHTML;
    var template = Handlebars.compile(source);
    var html = template({
        'home' : {
           'url'  : '/',
           'text' : 'Code Maven'
        },
        'perlmaven' : {
            'url' : 'http://perlmaven.com/'
        }
    });

    document.getElementById('content').innerHTML = html;
});

</script>

view

Хендлер выглядит вот так:

Handlebars.registerHelper('link', function(obj) {
    var url  = obj.url;
    var text = obj.text;
    if (text == undefined) {
        text = url;
    }
    return new Handlebars.SafeString( '[' + text + '](' + url + ')' );
});

Здесь мы связали строку 'link' с функцией, которая принимает единственный параметр. Мы копирует атрибуты url и text в подходящие переменные, но используем url в качестве текста ссылки, если он не определен.

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

Как только мы создали этот хендлер, мы можем использовать его в нашем шаблоне:

    <script id="text-template" type="text/x-handlebars-template">
        {{link home}}<br>
        {{link perlmaven}}<br>
    </script>

В отличие от статического случая, который мы рассмотрели ранее, в этот раз мы используем новое ключевое слово link наряду с параметром. Один раз параметр это 'home', и один раз 'perlmaven'. Это плейсхолдеры, которые будут заменены на данные, переданные в функцию template().

В итоге давайте посмотрим на вызов функции template() с передаваемыми в нее данными. Здесь вы можете видеть, что мы передаем объект с двумя атрибутами - 'home' и 'perlmaven'. Они будут связаны с соответствующими плейсхолдерами в шаблоне. Заметьте, что для 'home' мы передаем оба атрибута - 'url' и 'text', в то же время для 'perlmaven' передаем только 'url'.

    var html = template({
        'home' : {
           'url'  : '/',
           'text' : 'Code Maven'
        },
        'perlmaven' : {
            'url' : 'https://perlmaven.com/'
        }
    });

Результат, который вы увидите, будет таким:

Code Maven
http://perlmaven.com/