Добрый день всем,кто не спит и хочет заработать немного бабла.Сегодня в рамках уроков веб дизайна ознакомимся с новыми возможностями jQuery,опубликованными на их блоге.Вещь полезная,особенно веб мастерам.
6 октября 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
Начнём с простенького примера:
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
<ul id="movieList"></ul>Итак, в примере разработчик страницы описал шаблон для вывода объектов в виде разметки (первый элемент script), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList.
В результате работы плагина мы получим такую разметку:
<ul id="movieList">
<li><b>The Red Violin</b> (1998)</li>
<li><b>Eyes Wide Shut</b> (1999)</li>
<li><b>The Inheritance</b> (1976)</li>
</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 <что нужно вставить>}}.
Все остальные уроки веб дизайна будут далее.Кто силен в английском рекомендую посетить первоисточник за наиболее полной информацией,а я прощаюсь до завтра с надеждой опять выйти на связь.Очень надеюсь,что инфа была полезной,как и форма контактов.На этом и закругляюсь.
Пока-пока Сильвестр.
