|
|
Интересные статьи
|
|
|
|
|
Официальные плагины 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>
В этом примере в шаблон добавляются как простые строковые значения полей, так и значения с разметкой, взято вот с этой страницы. Источник: http://www.linkexchanger.su
|
|
|
|