Официальные плагины jQuery: Templates plugin

4 октября 2010 года была опубликована запись в официальном блоге jQuery об анонсе трёх плагинов jQuery, созданных при поддержке команды Microsoft. Эти плагины – плагин шаблонов (the jQuery Templates plugin), плагин привязки данных (the jQuery Data Link plugin) и плагин глобализации (the jQuery Globalization plugin) – получили статус “Официальные плагины проекта jQuery” (officially supported plugins of the jQuery project).

Плагин шаблонов используется при необходимости вывести объект данных или массив объектов в разметку страницы. Плагин привязки данных нужен для связи объектов с элементами страницы и синхронного изменения значений. Плагин глобализации позволяет выводить такие данные, как числа, дата и время, сумма денег и т.п., на страницу в соответствии с форматом текущего языка.

Следует отметить, что команда Microsoft использовала свои немалые наработки в этих направлениях, как и команда проекта jQuery, и при хорошо сложившемся взаимодействии получились, на мой взгляд, отличные инструменты для разработчиков. В подтверждение моего мнения могу добавить, что разработчики jQuery анонсировали включение плагинов шаблонов и привязки данных в ядро библиотеки jQuery уже версии 1.5, а плагина глобализации – в соответствующую версию jQuery UI. Плагины пока ещё не получили статус релиза, но уже активно ведется написание документации на сайте http://api.jquery.com. К слову, команда Microsoft последовала традициям разработки jQuery и разместила материалы по разработке плагинов на github.com, где доступны описание и исходники плагинов.

В этой статье я расскажу немного о плагине шаблонов.
jQuery Templates plugin

Начнём с простенького примера:01 <script id="movieTemplate" type="text/x-jquery-tmpl">
02 <li><b>${Name}</b> (${ReleaseYear})</li>
03 </script>
04
05 <script type="text/javascript">
06 var movies = [
07 { Name: "The Red Violin", ReleaseYear: "1998" },
08 { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
09 { Name: "The Inheritance", ReleaseYear: "1976" }
10 ];
11
12 $( "#movieTemplate" ).tmpl( movies )
13 .appendTo( "#movieList" );
14 </script>
15
16 <ul id="movieList"></ul>

Итак, в примере разработчик страницы описал шаблон для вывода объектов в виде разметки (первый элемент script), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList.
В результате работы плагина мы получим такую разметку:1 <ul id="movieList">
2 <li><b>The Red Violin</b> (1998)</li>
3 <li><b>Eyes Wide Shut</b> (1999)</li>
4 <li><b>The Inheritance</b> (1976)</li>
5 </ul>

А теперь по сути вопроса.
Что делает плагин?
Плагин получает на вход строку шаблона и множество объектов (или один объект), которые нужно вывести в строку (или разметку) с форматированием.
Где это применяется?
В основном этот плагин полезен при динамическом выводе объектов JS на страницу, объекты могут быть получены самыми разными способами, например, при разчётах или по результатам каких-то действий пользователя и, конечно самый часто приводимый пример, в виде JSON в ответе сервера на AJAX запрос.
Методы плагина

.tmpl( [ data ], [ options ] )
Получает содержимое первого выбранного элемента и использует его в качестве шаблона для форматированного вывода указанных данных.
data – данные для вывода в шаблон (объект или массив объектов).
options – опционально, определённое пользователем расширение в виде пар ключ-значение для объекта вывода в шаблон.
jQuery.tmpl(template, [ data ], [ options ])
Использует указанный шаблон для форматированного вывода указанных данных.
template – шаблон для форматирования данных, может быть одного из следующих типов: строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке), строка, соответствующая имени ранее скомпилированного шаблона.
data, options – имеют то же значение, что и выше
.tmplItem()
Возвращает для первого выбранного элемента структуру (объект) с результатами работы шаблонизатора. Возвращаемый методом объект обеспечивает доступ к:
HTML-частям, из которых состоит шаблон
ассоциированной единице переданных данных
родительскому шаблону, если текущий шаблон является вложенным
текущему шаблону, использованному для вывода
определённому пользователем расширению (полям и методам), переданным в параметр options метода tmpl()

Этот метод используется, напрмер, когда после проведенного форматирования данных требуется узнать, а какие же данные были использованы при формировании некоторого куска разметки, или для обновления куска разметки с использованием новых данных.
jQuery.tmplItem( element )
Аналогичен методу .tmplItem, только структура с результатами работы шаблонизатора ищется для элемента element (HTML-элемент, в том числе и в jQuery-обёртке).
.template( [ name ] )
Метод делает из содержимого первого выбранного элемента скомпилированную версию шаблона форматирования.
name – необязательно имя шаблона, если имя указано, то потом можно использовать его для обращения к этому шаблону в методе jQuery.tmpl(name, data, options)
jQuery.template( [ name, ] template )
Метод аналогичен описанному выше, только здесь шаблон передаётся в качестве параметра template – это может быть строка, строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке).
Синтаксис шаблона

Я вкратце приведу описание нескольких самых основных элементов шаблона, остальное надеюсь более подробно описать в следующей статье (если будет положительный отклик на эту статью)
${fieldNameOrExpression} и {{= fieldNameOrExpression}}
Позволяет вставить в шаблон значение поля (свойства) объекта данных, может быть также использовано для вставки результата метода или js-выражения. Напрмер, «${Name}» – вставит в шаблон значение поля obj.Name, а при том, что Languages – это поле объекта, которому присвоен массив, «${Languages.length}» – вставит в шаблон длину этого массива, и наконец, если у объекта есть метод getLanguages с двумя параметрами, то «${getLanguages(Languages, ‘ – ‘)}» – вставит в шаблон результат работы этого метода.
{{html fieldNameOrExpression}}
Элемент шаблона ${field} (или {{= field}}) вставляет в результат значение указанного поля в виде текста, т.е. если в строке будут HTML-теги, то они будут закодированы, а не преобразованы в разметку. Если вам требуется вставить данные в шаблон именно в виде HTML-разметки, то надо использовать синтаксис {{html <что нужно вставить>}}.
Для начала работы с плагином уже достаточно рассказано, могу лишь добавить, что синтаксис шаблонов позволяет вставлять вложенные шаблоны, условные инструкции, обращаться к некоторым объектам JS и jQuery и ещё кое-что… Остальное – материал будущей статьи.
Источники

Статья написана по материалам, найденным во всемирной паутине. В основном это перевод официальной документации. Оригиналы можно посмотреть по следующим ссылкам:
Сообщение в блоге jQuery и в блогах MS
Страница документации плагина (примеры взяты оттуда)
Об авторе

Зовут меня Зайцев Андрей, мой маленький блог, профиль на форуме zandroid

Это моя первая статья в этом блоге, надеюсь, и не последняя Большое спасибо Геннадию за возможность публикации и за полезные советы по написанию и оформлению материала.
Примеры

Пример 1: Динамическое переключение применяемого шаблона01 <!DOCTYPE html>
02 <html>
03 <head>
04 <style>
05 table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
06 table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; }
07 .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
08 </style>
09 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
10 <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
11 </head>
12 <body>
13
14 <script id="summaryTemplate" type="text/x-jquery-tmpl">
15 <tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
16 </script>
17
18 <script id="detailTemplate" type="text/x-jquery-tmpl">
19 <tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>
20 </script>
21
22 Click for details:
23 <table><tbody id="movieList"></tbody></table>
24
25 <script type="text/javascript">
26 var movies = [
27 { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
28 { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
29 { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
30 ];
31 var selectedItem = null;
32
33 /* Render the summaryTemplate with the "movies" data */
34 $( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );
35
36 /* Add onclick handlers for movie template items
37 using the summary or details template */
38 $("#movieList")
39 .delegate( ".movieSummary", "click", function () {
40 if (selectedItem) {
41 // Set the template on the previously selected item
42 // back to the summary template
43 selectedItem.tmpl = $( "#summaryTemplate" ).template();
44 selectedItem.update();
45 }
46 /* Get the data structure for the template item
47 which this clicked element belongs to, and make
48 it the selected item */
49 selectedItem = $.tmplItem(this);
50
51 /* Set the template on this item to the detail template */
52 selectedItem.tmpl = $( "#detailTemplate" ).template();
53 selectedItem.update();
54 })
55 .delegate( ".movieDetail", "click", function () {
56 /* Set the template on this item to the summary template */
57 selectedItem.tmpl = $( "#summaryTemplate" ).template();
58 selectedItem.update();
59 selectedItem = null;
60 });
61 </script>
62
63 </body>
64 </html>

Довольно сложный и объемный, в нём используются сразу несколько методов плагина, взят с этой страницы.

Пример 2: Вставка данных с разметкой в шаблон01 <!DOCTYPE html>
02 <html>
03 <head>
04 <style>
05 .role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
06 </style>
07 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
08 <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
09 </head>
10 <body>
11
12 <script id="movieTemplate" type="text/x-jquery-tmpl">
13 <h4>${Name}</h4>
14 <p>{{html Synopsis}}</p>
15 </script>
16
17 <div id="movieContainer"></div>
18
19 <script>
20 /* The Synopsis data field contains HTML markup. */
21 var movie = {
22 Name: "Meet Joe Black",
23 Synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
24 };
25
26 /* Render the template with the movie data.
27 The template uses the {{html}} template tag
28 to insert the Synopsis HTML markup data. */
29 $( "#movieTemplate" ).tmpl( movie )
30 .appendTo( "#movieContainer" );
31 </script>
32
33 </body>
34 </html>

В этом примере в шаблон добавляются как простые строковые значения полей, так и значения с разметкой, взято вот с этой страницы.