В WordPress повсюду используются шаблоны и Javascript там не исключение. В этой заметке поговорим про встроенную в WordPress возможность создавать HTML шаблоны, которые затем можно использовать в JS. Создаются и используются такие шаблоны очень просто, впрочем как и многое другое в WordPress.
Есть много способов создавать шаблоны в Javascript, для них даже придумана отдельная спецификация именуемая Mustache . Она реализована на многих языках, включая Javascript. Например, библиотека Handlebars использует эту спецификацию и даже немного её расширяет. Или популярная мини-библиотека Underscore .
С версии 3.5 WordPress уже имеет в своем ядре удобный шаблонизатор для JS. Он например используется в админке при создании блоков для медиа-загрузчика. В основе лежит вышеупомянутая библиотека Underscore , синтаксис немного переделан, чтобы больше соответствовать спецификации Mustache .
Для создания шаблонов в WordPress есть метод wp.template
wp.template(id)Создает объект шаблона из HTML кода. Чтобы получить готовый HTML код для использования в JS, в созданный объект нужно передать данные для заполнения шаблона.
ВозвращаетFunction. Функцию, в которую нужно передать данные для интерполяции шаблона.
Использование var template = wp.template(id); var HTML = template(data); id(строка)Идентификатор HTML элемента который содержит HTML код шаблона. HTML элемент должен иметь указанный тут атрибут id с префиксом tmpl- .
Например, если тут указать foo , то HTML элемент должен иметь id id="tmpl-foo" .
Data(объект) JS объект данных, которые будут использованы для заполнения шаблона. Например: { text: "Привет" } .
Заполнение шаблона (интерполяция)- {{{data.unescaped}}} - неочищенные данные.
- {{data.escaped}} - очищенные данные.
- - обработать js (eval).
data в шаблоне - это объект исходных данных. В шаблоне нужно использовать именно ключ data .
Чтобы соответствовать структуре данных возвращаемых функциями: wp_send_json_success() и wp_send_json_error() , wp.template оборачивает все полученные данные в переменную data . Поэтому перед каждым параметром в шаблоне нужно указывать data. , иначе мы получим ошибку: {property} is not defined .
Правильно {{{data.name}}}
Неправильно {{{name}}}
Пример шаблонаЭто будет просто выведено.
Выведем значение переменной escapedValue {{data.escapedValue}}.
Если данные содержат разметку, выводим без экранирования:
{{{data.unescapedValue}}}Когда нужно выполнить какую-то логику.
Будет выведено, только если data.trueValue = true.
Создание и генерация шаблона Создание шаблонаЧтобы шаблон никак не фигурировал в DOM дереве, его принято создавать в теге script с указанием типа type="text/html" .
Привет {{{data.name}}}
Атрибут id должен начинаться с tmpl- , все что после этого префикса будет затем использовано в функции wp.template("my-template") .
Создание шаблона в теге script это хак, который отлично подходит для создания html элемента, который никак не используется браузером. Когда указан непонятный для браузера тип он просто игнорирует html тег, а это нам и нужно.
Шаблон также можно создать в любом другом HTML элементе (например в , который затем можно скрыть), единственное что нужно это указать id атрибут.
Также для создания шаблонов есть специальный HTML тег , однако он не поддерживается в IE . Но в целом он довольно актуален.
Генерация шаблонаwp.template() возвращает функцию, поэтому не пытайтесь передать результат в html элемент или вывести результат в консоль. Обычно результат wp.template() передается в переменную, а затем эта переменная используется как функция и в неё передаются данные, которыми должен быть заполнен шаблон.
Пример (шаблон указан выше)
// JS var template = wp.template("my-template"), data = { name: "Виктор" }; jQuery(".my-element").html(template(data));
В результате получим в HTML:
Привет Виктор
Пример комментирования на AJAX с использование шаблонаСоздаем шаблон и подключаем скрипт в файле темы functions.php:
Эксплуатация
