WP.TEMPLATE — ШАБЛОНЫ HTML ДЛЯ JAVASCRIPT В WORDPRESS

# WP.TEMPLATE — HTML ШАБЛОНЫ ДЛЯ JAVASCRIPT В WORDPRESS

WordPress использует шаблоны везде, и JavaScript не исключение. В этой статье мы поговорим о встроенной возможности в WordPress создавать HTML-шаблоны, которые затем могут использоваться в JS. Создание и использование таких шаблонов очень просто, как и многие другие аспекты WordPress.

Существует множество способов создания шаблонов в JavaScript, включая отдельную спецификацию под названием Mustache, которая реализована во многих языках, включая JavaScript. Например, библиотека Handlebars использует эту спецификацию и немного её расширяет. Также популярна мини-библиотека Underscore.

Начиная с версии 3.5, WordPress имеет удобный механизм шаблонов для JS в своём ядре. Например, он используется в админ-панели при создании блоков для загрузчика медиафайлов. Он основан на библиотеке Underscore с немного изменённым синтаксисом для лучшего соответствия спецификации Mustache.

## Содержание

- [wp.template( id )](#wptemplate-id)
- [Возвращаемое значение](#возвращаемое-значение)
- [Заполнение шаблона (интерполяция)](#заполнение-шаблона-интерполяция)
- [Создание и генерация шаблона](#создание-и-генерация-шаблона)
- [Пример комментирования AJAX с использованием шаблона](#пример-комментирования-ajax-с-использованием-шаблона)

## wp.template( id )

Создает объект шаблона из HTML-кода. Чтобы получить готовый к использованию HTML-код в JS, необходимо передать данные в созданный объект для заполнения шаблона.

### Возвращаемое значение

Функция. Это функция, в которую нужно передать данные, которые затем будут использованы для заполнения в созданный HTML-шаблон.

### Пример использования

```javascript
var template = wp.template( id );
var HTML = template( data );

id (строка)

Идентификатор HTML-элемента, который содержит HTML-код шаблона. HTML-элемент должен иметь указанный атрибут id с префиксом tmpl-.

Например, если вы укажете "foo", то HTML-элемент должен иметь id="tmpl-foo".

data (объект)

JavaScript-объект данных, который будет использоваться для заполнения шаблона. Например: { text: 'Привет' }.

wp.template определяется в файле wp-includes/js/wp-util.js.

Заполнение шаблона (интерполяция)

В шаблоне вы можете использовать следующие конструкции:

• {{{data.unescaped}}} — не экранированные данные.
• {{data.escaped}} — экранированные данные.
• <# logic #> — выполнение логики на JavaScript (eval).

Префикс данных

Данные в шаблоне представляют собой об��ект. В шаблоне нужно использовать ключ data.

Чтобы соответствовать структуре данных, возвращаемых функциями wp_send_json_success() и wp_send_json_error(), wp.template оборачивает все полученные данные в переменную data. Поэтому перед каждым параметром в шаблоне необходимо указывать data., иначе возникнет ошибка: {property} is not defined.

Пример шаблона

Создание и генерация шаблона

Создание шаблона

Чтобы шаблон не отображался в DOM-дереве, его принято создавать в теге <script> с типом text/html.

Атрибут id должен начинаться с tmpl-, и всё, что следует после этого префикса, будет использоваться в функции wp.template( 'my-template' ).

Создание шаблона в теге <script> — это обходной путь, который отлично подходит для создания HTML-элемента, который не используется браузером. Когда для браузера указан неизвестный тип, он просто игнорирует html-тег, что и нужно.

Шаблон также может быть создан в любом другом HTML-элементе (например, в <div>, который затем можно скрыть). Главное — указать атрибут id.

Существует также специальный HTML-тег <template> для создания шаблонов, однако он не поддерживается в Internet Explorer. Но в общем, он актуален.

Генерация шаблона

wp.template() возвращает функцию, поэтому не пытайтесь передать результат в HTML-элемент или выводить результат в консоль. Обычно, результат wp.template() сохраняется в переменную, а затем эта переменная используется как функция, и данные передаются в неё для заполнения шаблона.

Пример (шаблон указан выше)

var template = wp.template( 'my-template' )
var data     = { name: "Виктор" }

jQuery('.my-element').html( template( data ) )

В результате в HTML мы получим:

    
Привет Виктор

Пример комментирования AJAX с использованием шаблона

Создайте шаблон и включите скрипт в файл темы functions.php:

var singleTemplate = wp.template( 'comment-single' ), // наш шаблон
var $comments      = jQuery('.commets_wrap'),        // контейнер с комментариями
var $commentForm   = jQuery('#respond')              // форма комментария

// функция для обработки ответа AJAX
function commentSuccess( data ){
    // создаём HTML используя шаблон
    $comments.append( singleTemplate( data ) );

    // сбрасываем форму
    $commentForm.get(0).reset();
}