JavaScript
Handlebars

Search for '{{search_term}}'

Хелперы Handlebars

CMOS is the Code-Maven Open Source podcast that also includes video interviews. Subscribe to this feed RSS feed with your Podcast listener app or via iTunes iTunes.

Кроме языка шаблонов, который предлагает нам 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>


Try!

Хелпер это сниппет 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>



Try!

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

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>' );
});

Здесь мы связали строку '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' : 'http://perlmaven.com/'
        }
    });

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

Code Maven
http://perlmaven.com/

Savenkova Natalya
Переводчик
Savenkova Natalya
Gabor Szabo
Автор
Gabor Szabo

Comments