Хелперы 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>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' : 'https://perlmaven.com/' } });
Результат, который вы увидите, будет таким:
Code Maven
http://perlmaven.com/

Published on 2015-05-03