Макет цифровых данных в jquery. Работаем с jQuery Templates. Галерея «TouchTouch», оптимизированная для просмотра с мобильных устройств

С выпуском jQuery, жизнь разработчиков стала значительно проще. Например мы без труда можем сделать следующее:

$("#someElement").children().each(function() { $(this).wrap($("")); });

Этот код поместит всех потомков элемента с id #someElement в тег . В подобных операциях нет ничего плохого; это выражение абсолютно верно составлено и является очень удобным в некоторых ситуациях. Но HTML код, помещённый в наш сценарий - это нарушение структурной логики кода. В этом простом примере это нарушение не является существенным, однако в реальных проектах это очень распространено. Обычно подобный код содержит множество HTML фрагменты, которые выстраиваются в DOM после получения данных из AJAX запросов. Такой стиль может быстро превратиться в нечто, что будет крайне не читабельно.

Использование шаблонов позволит нам устранить этот недостаток, путём отделения HTML фрагментов от скриптов, таким образом разделить логику содержания разных видов кода. В процессе, я не могу не показать вам некоторые супер интересные нововведения, касающиеся AJAX, введённые jQuery 1.5.

В этом примере мы будем разрабатывать Twitter виджет, который будет загружать не только наши самые последние сообщения, но и список друзей и последователей. Я выбрал Twitter для этого примера, потому что он взаимодействует с данными в формате JSON с которыми работать легко и весело.

Давайте же начнем; сам виджет будет построен на базе следующей HTML структуры:

jQuery, AJAX and Templating Dan Wellman

Husband, father, front-end developer and author. Writes for Nettuts and Packt Publishing. Works for @designhaus | jQuery fanatic

• Tweets
• Friends
• Followers

В этом примере мы используем HTML5. Для этого мы указали упрощенный DOCTYPE и элемент мета. Так же вы можете заметить в коде подключение к таблицам стилей, которые будут описаны через пару минут. В целях поддержки текущей версии IE8 и ниже, используем условные комментарии на специальный плагин html5shiv.

Вероятнее всего этот виджет, будет выглядеть как боковая панель, и отображать содержание указанного пользователя Twitter. Учитывая это, я решил поместить содержимое в тег . Для того чтобы с лёгкостью получить доступ к этому элементы выставим ему ID.

К слову о разметке. Все заголовки сообщений пользователя Twitter будут включены в тег , а изображение и всё остальное в теге

Вы можете изменить это на своё собственное предпочтение, когда будете реконструировать данный пример. Мы могли бы получить все необходимые данные через JSON, что мы и сделаем, однако, если в процессе загрузки возникнет задержка, посетителю будет отображено множество пустых блоков. Так что лучше нам дождаться полной загрузки и затем произвести заполнение блоков.

Ещё у нас на странице будут реализованы вкладки для переключения между списками сообщений, друзей и подписчиков. Все они будут заключены в теги

,
• и . Вкладка со списком сообщений будет отображаться по умолчанию, поэтому нам необходимо указать специальный класс CSS для активной вкладки. В более крупном проекте предпочтительнее использовать jQuery для переключения вкладок интерфейса, но я не хотел концентрировать внимание на этом, т.к. тема урока другая.

  Наконец, у нас есть всё что нужно для того, чтобы разместить все входящие данные: внешний контейнер с ID, три вкладки для сообщений, друзей и последователей, которые также имеют свои ID для удобства выборки. Мы также добавили элемент для тех посетителей, которые не используют JavaScript при просмотре web-страниц. Обратите внимание, что мы будем использовать плагин tmpl, который даст нам возможность использовать шаблоны jQuery. Этот плагин можно скачать .

  Чуть ранее я упомянул о специальных таблицах стилей. Откройте новый файл в вашем любимом текстовом редакторе и добавить следующий код:

  #tweetbox { display:block; width:300px; padding:10px; border:1px solid #aaa; -moz-border-radius:5px; border-radius:5px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; background-color:#eee; } #tweetbox img { display:block; } #user { margin-bottom:10px; float:left; } #user h2 { margin:0 0 10px 0; position:relative; font-size:18px; } #user img { float:left; } #user p { width:230px; margin:0; position:relative; float:left; font-size:10px; color:#333; } #user img { display:block; margin-right:10px; border:3px solid #333; } #tools { margin:0; *margin-bottom:-10px; padding:0; clear:both; list-style-type:none; } #tools li { float:left; } #tools a { display:block; height:20px; padding:3px 24px; border:1px solid #aaa; border-bottom:none; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; margin-right:-1px; position:relative; font-size:14px; outline:none; background-color:#d6d6d6; background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.5, #E8E8E8), color-stop(0, #DBDBDB), color-stop(0.5, #D6D6D6)); background-image: -moz-linear-gradient(center top, #E8E8E8 50%, #DBDBDB 0%, #D6D6D6 50%); } a { text-decoration:none; color:#333; } #tools .on { height:21px; margin-top:-1px; top:1px; } #feed { width:298px; border:1px solid #aaa; clear:both; background-color:#d6d6d6; } #feed > div { display:none; } noscript { display:block; padding:10px; font-size:13px; color:#333; }

  Сохраните этот файл как tweetbox.css в том же каталоге, где находятся ваши HTML страницы. Это лишь малое, что мы можем указать для дизайна нашего виджета. В коде, который мы только что привели, вы можете заметить несколько приёмов CSS3: округлённые углы (обратите внимание, мы больше не нуждаемся в -WebKit- для этих целей!), а так же некоторые градиенты для вкладок. Следует отметить, что мы прячем все блоки, за исключением одного - активного. На данный момент виджет должен выглядеть так:

  

  Добавляем скрипт

  Теперь давайте напишем небольшой скрипт для реализации переключения вкладок. Создайте новый файл и добавьте следующий код:

  (function($) { //табы var tweetbox = $("#tweetbox"), tweetData = null, friendData = null, followData = null; tweetbox.find("#tools a").click(function(e) { e.preventDefault(); var link = $(this), target = link.attr("href").split("#"); tweetbox.find(".on").removeClass("on"); link.addClass("on"); tweetbox.find("#feed > div").hide(); tweetbox.find("#" + target).show(); }); })(jQuery);

  Сохраните этот файл (tweetbox.js) в том же каталоге, где и всё остальное. Тут ничего сложного нет. Вкладки не является сутью урока, так что я не буду долго на этом останавливаться. Скрип работает следующим образом: мы используем анонимную функцию, которая отлавливает тот контейнер который является активным. Мы также инициализируем три переменные, которые будем использовать в дальнейшем. Выставляем их значение в null.

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

  Получаем данные

  Теперь начинается самое интересное. Мы будем делать запрос на Twitter для того, чтобы получить данные для всех 3х вкладок, а так же применим плагин для того, чтобы иметь возможность использовать jQuery шаблоны. Добавьте этот код после предыдущего:

  $.ajaxSetup({ dataType: "jsonp" }); function getTweets() { $.ajax("http://api.twitter.com/statuses/user_timeline/danwellman.json", { success: function(data) { var arr = ; for (var x = 0; x < 5; x++) { var dataItem = {}; dataItem["tweetlink"] = data[x].id_str; dataItem["timestamp"] = convertDate(data, x); dataItem["text"] = breakTweet(data, x); arr.push(dataItem); } tweetData = arr; } }); } function getFriends() { return $.ajax("http://api.twitter.com/1/statuses/friends/danwellman.json", { dataType: "jsonp", success: function(data) { var arr = ; for (var x = 0; x < 5; x++) { var dataItem = {}; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); } friendData = arr; } }); } function getFollows() { return $.ajax("http://api.twitter.com/1/statuses/followers/danwellman.json", { dataType: "jsonp", success: function(data) { var arr = ; for (var x = 0; x < 5; x++) { var dataItem = {}; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); } followData = arr; } }); } $.when(getTweets(), getFriends(), getFollows()).then(function(){ // используем шаблоны });

  Сначала мы используем метод ajaxSetup() для того, чтобы указать формат данных, с которыми мы будем иметь дело - jsonp. Поскольку нам предстоит выполнить несколько запросов, лучше один раз указать данное значение.

  Далее мы пишем 3 стандартные по функционалу метода, в которых используем отдельные метод ajax(). Он будет делать запрос на сервис Twitter и возвращать данные. Для запроса мы будем использовать специальные ключевые слова: user_timeline, friends и followers. Чтобы быть уверенными, что данные будут сформированы после удачного запроса, включим наш код в блок success. Каждая из этих функций будет возвращать по 100 хорошо упакованных объектов с Twitter данными.

  Для крока нам не нужно такое количество данных, поэтому мы поместим в массив только по 5 объектов. Для того чтобы быть уверенными, что мы формируем JSON данные в правильном формате, ключи каждого элемента помещаем в двойные кавычки.

  Данные функции практически идентичны друг другу. Заметьте, что для каждого запроса, мы используем свои уникальные ключевые слова. В конце работы каждой из функций, мы присваиваем скопленные массивы элементам, которые содержали значения null (сформированы выше).

  Заметьте, что мы не просто вызываем наши три метода - а используем метод when(), который запустит своё содержание только тогда, когда эти три метода закончат свою работу. После того как все три функции вернут success, мы запустим метод then(), где будет располагаться функциональность, касающаяся шаблонов.

  К слову сказать. В данном контексте можно указать и метод fail(), который запустится в том случае, если запросы на Twitter пройдут с ошибкой.

  Всё это очень круто, поскольку в ранних версиях jQuery не был предусмотрен подобный функционал.

  Вспомогательные функции

  В предыдущем примере мы используем некоторые вспомогательные функции convertDate() и breakTweet(). Вот их содержание:

  //формат даты convertDate = function(obj, i) { if (window.ActiveXObject) { obj[i].created_at = obj[i].created_at.replace(/[+]\d{4}/, ""); } var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], date = new Date(obj[i].created_at), formattedTimeStampArray = .created_at], date.toLocaleDateString(), date.toLocaleTimeString()]; return formattedTimeStampArray.join(" "); } breakTweet = function(obj, i) { var text = obj[i].text, brokenTweet = , atExpr = /(@[\w]+)/; if (text.match(atExpr)) { var splitTweet = text.split(atExpr); for (var x = 0, y = splitTweet.length; x < y; x++) { var tmpObj = {}; if (splitTweet[x].indexOf("@") != -1) { tmpObj["Name"] = splitTweet[x]; } else { tmpObj["Text"] = splitTweet[x]; } brokenTweet.push(tmpObj); } } else { var tmpObj = {}; tmpObj["Text"] = text; brokenTweet.push(tmpObj); } return brokenTweet; }

  Функция convertDate(): в первую очередь проверяем, использует ли браузер window.ActiveXObject. Если да, то мы используем JavaScript метод replace(), чтобы удалить Timezone, которая содержится в JSON объекте, возвращённом от Twitter. Этот метод использует регулярные выражения для того чтобы найти и заменить строку.

  Далее мы создаём некоторые переменные; массив, который содержит сокращённые названия месяцев. Дни в датах JavaScript начинаются с 0. Затем мы создаём объект Date, используя конструктор new Date(, и передаём дату, которая хранится в свойстве created_at объекта, переданного в функцию.

  Создадим ещё один массив из 3х элементов: первый это день недели, второй - локализованная дата, третий - локализованное время. После формирования массива, мы его возвращаем.

  Функция breakTweet() немого сложнее. Тут нам необходимо преобразовать обычный текст в JSON массив, в котором каждый элемент это объект, содержащий свойства Name или Text. Они будут использоваться в шаблоне. Сначала мы получаем текст из объекта, который вернул нам Twitter (передали его в функцию). Так же тут применяем регулярное выражение, которое отлавливает наличие @usernames.

  Далее мы сканируем текст, чтобы найти имя пользователя; если оно присутствует, вытаскиваем его. У нас получается массив из текстовых значений. Проходимся по этому массиву, ищем тест содержащий символ @; Если данный символ присутствует, то записываем его с ключом Name. Остальной текст записываем с ключом Text. Сформированные объекты помещаем в массив.

  Вот и всё. Мы только что сформировали объект, который можем передать в jQuery шаблон.

  Работа с шаблоном

  Теперь когда все необходимые данные сформированы, можем приступать к последней части нашего урока: шаблонам. Вернёмся к содержанию блока метода then(). Вставьте код внутри данного блока:

  //применяем шаблоны tweetbox.find("#tweetTemplate").tmpl(tweetData).appendTo("#tweetList"); tweetbox.find("#ffTemplate").tmpl(friendData).appendTo("#friendList"); tweetbox.find("#ffTemplate").tmpl(followData).appendTo("#followList"); //показываем сообщения tweetbox.find("#tweets").show();

  Тут я демонстрирую использование плагина tmpl(). В данном фрагменте мы передаём сформированные данные в шаблон, указывая какой элемент будет их принимать. Метод tmpl() вызывается для каждого элемента, которые мы ещё не создали. Так давайте добавим их.

  Добавляем jQuery шаблоны

  Снова вернёмся к HTML. Первое что мы сделаем, добавим тег сразу же после пустого ul с id “tweetList”:

  {{each text}} {{if Name}} {{tmpl(Name) "#atTemplate"}} {{else}} ${Text} {{/if}} {{/each}} ${timestamp}

  ${$item.data}

  jQuery шаблоны добавляются на страницу HTML непосредственно через элемент . У каждого такого элемента должен быть выставлен элемент id для того, чтобы они могли быть распознаны и обработаны методом tmpl(). Так же атрибут type должен хранить следующее значение - text/x-jquery-tmpl.

  В первом шаблоне, мы добавляем структуру, которую в последствии хотим выводить в DOM. В частности каждое Twitter сообщение будет заключено в теги ,

  И . Чтобы вставить данные из JSON объекта, переданного через метод tmpl(), мы используем серию шаблонных тегов. Затем используем {{each}} для того, чтобы пройтись по каждому элементу, которое хранится в массиве.

  Это массив содержит все Twitter сообщения. Для каждого из них мы делаем проверку на наличие ключа Name. Если ключ присутствует, используем {{tmpl}} тег. Имя функции, через которую будут проходить данные, мы указываем в скобках после tmpl, а также указываем id шаблона, который будем использовать (более детально рассмотрим его через несколько минут). Если объект не содержит ключ Name, то значит мы имеем дело с обычным текстом, который вставим с помощью ${text}. Это условное достигается с помощью тега {{if}} и {{else}}. После этого мы должны закрыть условие, используя {{/if}, и аналогично завершить цикл {{/foreach}}.

  Теперь нам необходимо создать ссылку, которая будет вести непосредственно на Twitter. Для этого используем ${tweetlink} как часть атрибута href, и свойство ${timestamp}. Это данные, которые мы создали и успешно обработали по запросу user_timeline.

  Таким же образом нам необходимо создать вкладки для отображения наших друзей и подписчиков. Их мы создадим по точно такому же принципу. База для всех одна:

• ${screenname} ${desc}

  Вот мы и научились передавать данные в шаблон с помощью json и выводить их при помощи конструкции ${data};

  Последний штрих

  Теперь, когда почти всё готово, мы можем добавить еще несколько CSS стилей для того, чтобы всё это выглядело более менее прилично. Добавьте следующий код в конец файла tweetbox.css:

  #feed ul { padding:0; margin:0; } #feed li { padding:0; border-bottom:1px solid #aaa; list-style-type:none; font-size:11px; } #feed li:last-child, #feed li:last-child p { border-bottom:none; } #feed p { padding:10px; margin:0; border-bottom:1px solid #eee; background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.48, #c2c2c2), color-stop(0.71, #d6d6d6)); background-image:-moz-linear-gradient(center bottom, #c2c2c2 48%, #d6d6d6 71%); } #feed p:after { content:""; display:block; width:100%; height:0; clear:both; } .tweet-link { display:block; margin-top:5px; color:#777; } .img-link { display:block; margin:4px 10px 0 0; float:left; } #feed .username a { font-size:14px; font-weight:bold; } #feed .bio { display:block; margin-top:10px; }

  После сохранения файла, наше приложение будет выглядеть следующим образом:

  

  Есть еще одна вещь, которую нам, вероятно, следует реализовать: на данный момент, наше форматирования не работает в IE, поскольку IE не дружит с методом split(). Чтобы устранить эту проблему, мы можем использовать превосходный JavaScript патч, созданный Steven Levithan. Он может быть загружен с: http://blog.stevenlevithan.com/archives/cross-browser-split. Подключим этот код с помощью условного комментария:

  Этот код надо добавить непосредственно перед подключением файла tweetbox.js.

  Заключение

  В этом уроке мы рассмотрели некоторые более продвинутые возможности шаблонов в jQuery. Мы познакомились с итерационным циклом {{each}} и условиями {{if}} и {{else}}.

  Ключевым моментом является то, что новая система шаблонов в jQuery позволяет нам разделить наш код, перемещая все HTML фрагменты из файлов JS и обратно в HTML файл.

  Некоторые могут возразить, что мы сейчас просто увеличиваем количество тегов на нашей странице.

  Однако я думаю, что эта альтернатива более предпочтительна. Элементы в формате $ ("") просто строки (конечно же до того момента как браузер запустится, и они создадутся и вставятся в DOM).

  Мы также посмотрели на новый метод when(), добавленный в JQuery 1.5, который позволяет управлять множеством асинхронных запросов. Далее мы использовали метод then(). Данная функция запустит своё содержание только после завершения всех асинхронных процессов.

  Надеюсь, статья была для вас полезна. Спасибо за внимание.

  Плагин для реализации сменяющихся слов с различными анимированными эффектами. CSS эффект подойдет для реализации промо-сайтов и анимированных баннеров.

  Реализация разбиения содержимого страницы на вкладки (табы) с использованием анимированных CSS3 эффектов. Четыре варианта исполнения: горизонтальные и вертикальные табы с различными анимированными эффектами.

  3. Адаптивный jQuery слайдер на основе плагина IMPRESS.JS

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

  jQuery решение для создания удобной навигации по разделам документа без перезагрузки страницы. Каждый раздел отображается в отдельном блоке с вертикальной прокруткой, а переход между ними можно осуществить как с помощью клика мыши, так и воспользовавшись заглавием (при большом расширении экранов содержание заглавие отображается с левой стороны, при просмотре сайта на малом экране - сверху документа).

  Реализация навигации по содержимому в виде Список категорий → Список разделов → Содержимое раздела. Навигация сопровождается различными JS эффектами.

  Пролистывание слайдов осуществляется с Parallax эффектом (движение слоев с различной скоростью, в совокупности создают 3D эффект). Размер слайдера изменяется пропорционально изменению размера окна браузера.

  Слайд-шоу с музыкальным сопровождением. Есть возможность ставить на паузу или проматывать музыкальную композицию.

  11. Своеобразное меню на jQuery и CSS

  При выборе пункта меню область с его содержимым раскрывается поверх.

  Выпадающее горизонтальное меню с интересным jQuery эффектом появления вложенных пунктов.

  Обалденный jQuery CSS плагин, будет очень полезным дополнением для сайта любой веб-студии или фрилансера. С его помощью можно наглядно отобразить примеры выполненных работ с разбивкой по времени. Внизу отображается сама временная шкала, а сверху выполненные работы. Для перехода между работами можно использовать как шкалу, так и стрелки влево/вправо.

  14. Галерея «TouchTouch», оптимизированная для просмотра с мобильных устройств 15. CSS3 слайдер изображений «Cycle Slider»

  При клике на название выезжает изображение с описанием. Используется только CSS3.
  Урок по созданию галереи .

  17. Классные яркие всплывающие подсказки jQuery и CSS3

  Всплывающие jQuery подсказки в 7 стилевых оформлениях. Легко подключить и использовать в своих проектах.

  Если изображений в галерее больше 5, то появляются стрелки влево/вправо для навигации по фотографиям.

  Слайдами могут быть не только изображения, но и другой HTML контент.

  Плагин для создания фотореалистичных теней.

  Свежая реализация слайдера.

  26. Перенос текста «Bacon»

  Необычный эффект переноса текста на странице на новую строчку по кривой или заданной линии с определенным шагом смещения.

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

  28. Выбор вида отображения блоков с использованием CSS3

  Четыре вида отображения блоков: изображение с описанием в три колонки, изображение с описанием в одну колонку, только изображения, только текстовое описание. Для переключения вида отображения блоков необходимо воспользоваться пиктограммами сверху.

  Приступаем к работе Давайте начнем. Приведенный ниже пример показывает список фильмов, заданный в массиве (полный код примера - в файле BasicSample1.htm ):

  Простой пример (1) ${title}

  Режиссер: ${director}
  В ролях: ${actors}
  Год: ${year}

  $(function () { $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); }); Простой пример (1)
  А вот что вы увидите в браузере:

  Давайте разберем этот пример подробно.

  Итак, первое, что я делаю, это подключаю jQuery Core Library и jQuery Templates :

  
  Ранее неоднократно говорилось о том, что jQuery Templates будут включены в jQuery Core Library - но в jQuery 1.5 RC1, вышедшем 24 января, шаблоны по прежнему отсутствуют.

  Затем я загружаю список фильмов:

  
  Разумеется, вы можете подготовить исходные данные любым удобным вам способом - получить их с помощью AJAX-запроса, создать на основе пользовательского ввода и т.п., статический скрипт я использую только для примера.

  Внутри файл DataItems.js выглядит следующим образом:

  Var dataItems = [ { title: "Бандиты", thumbnail: "Bandits.jpg", director: "Барри Левинсон", actors: ["Брюс Уиллис", "Билли Боб Торнтон", "Кейт Бланшетт"], year: 2001, budget: 95000000, grossRevenue: 67631903, rating: 0, frames: ["Bandits-1.jpg", "Bandits-2.jpg", "Bandits-3.jpg", "Bandits-4.jpg", "Bandits-5.jpg"] }, ...
  Следующим шагом я создаю шаблон:

  ${title}

  Режиссер: ${director}
  В ролях: ${actors}
  Год: ${year}

  
  Обратите внимание, что шаблон размещается в теге SCRIPT , а в качестве MIME-типа я указываю text/x-jquery-tmpl . Встретив при разборе документа незнакомый MIME-тип, браузер не пытается интерпретировать содержимое тега SCRIPT , что мне и требуется.

  Вообще говоря, шаблон можно разместить в любом теге, например, в теге DIV :

  ${title}

  Режиссер: ${director}
  В ролях: ${actors}
  Год: ${year}

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

  Например, для приведенного выше примера будет сделана попытка загрузить несуществующую картинку:

  А вот случае с таблицей все может быть гораздо интереснее (большое спасибо TEHEK за этот пример!):

  {{each dataItems}} {{/each}}

  ${title}

  ${director}

  ${year}

  
  Internet Explorer и Opera обработают этот код корректно:

  А вот Chrome и Fire Fox «вытолкнут» лишний код за пределы таблицы, в результате чего таблица окажется пустой… Happy debugging! ;-)

  Для тега SELECT будет наблюдаться аналогичная картина.

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

  $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag");
  Что при этом происходит, я изобразил на приведенной ниже диаграмме:

• Метод .tmpl() получает текст шаблона - т.е. inner text элемента, полученного с помощью вызова $("#movieTmpl") .
• Текст шаблона компилируется - на его основе создается функция JavaScript.
• Создается «экземпляр шаблона» - объект, который содержит ссылку на элемент данных (поле data ), переданный как аргумент метода .tmpl() . Методу .tmpl() можно передать массив, объект, null или вызвать его без аргументов. Если передать массив, то для каждого элемента массива будет создан свой экземпляр шаблона, ссылающийся на этот элемент, во всех остальных случаях будет создан только один экземпляр.
• Вызывается скомпилированная функция-шаблон, которой передается объект-экземпляр. Функция возвращает текст шаблона, в котором сделаны все подстановки.
• Полученный на предыдущем шаге текст преобразуется в коллекцию HTML-элементов. Ссылки на эти элементы также сохраняются в объекте-экземпляре (поле nodes ), что позволяет в дальнейшем легко обновить «выход» шаблона при изменении исходных данных (см. раздел «Динамическое обновление»).
• И, наконец, метод .tmpl() возвращает jQuery -коллекцию HTML-элементов, которые добавляются в документ с помощью вызова appendTo("#movieListBag") .
Выражения Для подстановки в шаблон значений используется тег ${...} . Внутри этого тега можно указать как наименование свойства объекта, переданного методу .tmpl() , так и любое корректное выражение JavaScript, в том числе вызов функции.

Использование свойств объекта (элемента массива):

${title}
Использование выражений JavaScript:

Бюджет: $${(budget / 1000000).toFixed(0)} млн.
Сборы: $${(grossRevenue / 1000000).toFixed(1)} млн.

Поля и методы экземпляра шаблона Внутри выражений вы можете обращаться к текущему экземпляру шаблона через переменную $item , а для обращения к текущему элементу данных - переменную $data .

Каждый экземпляр шаблона содержит следующие поля:

• data - содержит ссылку на элемент данных, связанный с экземпляром шаблона;
• tmpl - содержит ссылку на скомпилированный шаблон, используемый для рендеринга;
• parent - если шаблон был вызван из другого шаблона с помощью тега {{tmpl}} , содержит ссылку на «родительcкий» экземпляр шаблона;
• nodes - после рендеринга содержит ссылки на HTML-элементы, порожденные в результате применения шаблона.
Кроме того, метод .tmpl() принимает два аргумента - data и options . С аргументом data вы уже познакомились, через него передается ссылка на элемент данных. А используя аргумент options , можно передать ссылку на объект, все поля и методы которого будут перенесены в каждый экземпляр шаблона, созданный в методе .tmpl() .

Ниже приведен пример использования этого параметра:

${title}

Режиссер: ${director}
В ролях: ${actors}
Год: ${year}
Бюджет: $${$item.formatBudget(budget)} млн.
Сборы: $${$item.formatGrossRevenue(grossRevenue)} млн.


$(function () { $("#movieTmpl") .tmpl(dataItems, { formatBudget: function (value) { return (value / 1000000).toFixed(0); }, formatGrossRevenue: function (value) { return (value / 1000000).toFixed(1); } }) .appendTo("#movieListBag"); });
В этом примере я использую для форматирования значений бюджета и сборов вызовы функций, но чтобы не «захламлять» глобальное пространство имен, я передал их через параметр options , после чего эти функции стали доступны как методы текущего экземпляра шаблона.

И, наконец, экземпляр шаблона содержит методы update() и html() , использование которых я покажу далее.

Как выглядит скомпилированный шаблон? Как выглядит скомпилированный шаблон, можно увидеть, воспользовавшись методом .template() , который как раз и осуществляет компиляцию шаблонов. Этот метод возвращает объект-функцию, содержимое которой легко посмотреть:

$("#compiledTemplateBag").text("" + $("#movieTmpl").template());
Шаблон, использованный в примере выше, после компиляции выглядит следующим образом (текст отформатирован для лучшей читаемости):

Function anonymous(jQuery, $item) { var $ = jQuery, call, _ = , $data = $item.data; with ($data) { _.push(" "); if (typeof (title) !== "undefined" && (title) != null) { _.push($.encode((typeof (title) === "function" ? (title).call($item) : (title)))); } _.push("

Режиссер: "); if (typeof (director) !== "undefined" && (director) != null) { _.push($.encode((typeof (director) === "function" ? (director).call($item) : (director)))); } _.push("
В ролях: "); if (typeof (actors) !== "undefined" && (actors) != null) { _.push($.encode((typeof (actors) === "function" ? (actors).call($item) : (actors)))); } _.push("
Год: "); if (typeof (year) !== "undefined" && (year) != null) { _.push($.encode((typeof (year) === "function" ? (year).call($item) : (year)))); } _.push("

"); } return _; }
Думаю, что теперь вам должно быть понятно, как обрабатываются выражения, указанные в теге ${...} - и это понимание может существенно помочь вам при отладке! Дело в том, что jQuery Templates выполняет относительно простое преобразование текста шаблона, поэтому если вы допустите ошибку в выражении, то сообщение об ошибке будет относиться к тексту полученной в результате преобразования функции и часто может быть крайне невразумительным.

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

Что ж, пожалуй, на этом рассказ о работе jQuery Templates стоит завершить и перейти к его практическому применению.

Часть вторая, практическаяУсловия Для того чтобы применять части шаблона в зависимости от некоторых условий, в jQuery Templates используются теги {{if}}...{{else}}...{{/if}} .

Приведенный ниже пример показывает использование этих тегов (полный код примера - в файле IfElseTag.htm ):

Носитель: {{if $item.data.media == "dvd"}} {{else $item.data.media == "blue-ray"}} {{else}} {{/if}}


Как несложно догадаться, этот код предназначен для вывода значка носителя, на котором находится фильм. Вот как это выглядит в браузере:

В качестве условия в тегах {{if}} и {{else}} можно использовать любое корректное JavaScript-выражение.

Обработка коллекций Для обработки коллекций в шаблонах используется тег {{each}}...{{/each}} . Приведенный ниже пример показывает использование тега {{each}} для вывода списка актеров (полный код примера - в файле EachTag1.htm ):

В ролях: {{each actors}} ${$value} {{if $index < $data.actors.length - 1}} , {{/if}} {{/each}}


В качестве аргумента тегу {{each}} можно передать массив, объект, или jQuery -коллекцию. Внутри тег {{each}} использует вызов jQuery.each() , поэтому все, что сказано в документации о поведении jQuery.each() справедливо и для тега {{each}} . Пример ниже демонстрирует использование тега {{each}} для показа всех свойств объекта (полный код примера - в файле EachTag2.htm ):

{{each $data}} ${$index} ${$value} {{/each}}
Внутри тега {{each}} доступно две переменные: $value , которая содержит ссылку на текущий элемент массива, и $index , которая содержит индекс текущего элемента массива или имя свойства.

Разумеется, внутри тега {{each}} можно использовать другие теги, а кроме того, вам по-прежнему будут доступны переменные $item и $data . В приведенном примере переменные $index и $data вместе с тегом {{if}} используются, чтобы вывести запятую между именами актеров - к сожалению, переменная $last не предусмотрена, хотя она была бы очень полезна!

Наконец, если у вас вдруг возникнет такая необходимость, вы можете изменить имена переменных по умолчанию. В примере, приведенном ниже, эти имена изменены на myIndex и myValue (полный код примера - в файле EachTag3.htm ):

В ролях: {{each(myIndex, myValue) actors}} ${myValue} {{if myIndex < $data.actors.length - 1}} , {{/if}} {{/each}}
Кстати, попытка изменить имя только для переменной $index ни к чему хорошему не приведет - ошибки не будет, но и доступа к текущему значению вы тоже не сможете получить!

Вложенные шаблоны Шаблоны могут быть очень большими - и тогда имеет смысл разделить их на несколько частей меньшего объема или включать повторяющиеся части, которые логично выделить в отдельный шаблон. В jQuery Templates это осуществляется с помощью вложенных шаблонов, для вызова которых используется тег {{tmpl}} .

Пример ниже иллюстрирует, как вынести часть кода шаблона в другой шаблон (полный код примера - в файле NestedTemplates1.htm ):

...

Режиссер: ${director}
В ролях: {{tmpl "#actorsTmpl"}}
Год: ${year}

... {{each actors}} ${$value} {{if $index < $data.actors.length - 1}} , {{/if}} {{/each}}
В теге {{tmpl}} обязательно указывается jQuery -селектор вызываемого шаблона или имя шаблона, ранее сохраненного в кэше. Т.к. в этом примере других аргументов у тега {{tmpl}} нет, вложенный шаблон получит тот же самый элемент данных, что и родительский - но экземпляр шаблона у него будет свой, причем поле parent в нем будет ссылаться на родительский экземпляр шаблона.

Следующий пример демонстрирует передачу во вложенный шаблон нового элемента данных и использование ссылки на родительский экземпляр шаблона. Как и в случае использования метода .tmpl() , если при вызове вложенного шаблона указать массив, то шаблон будет применен для каждого элемента массива (полный код примера - в файле NestedTemplates2.htm ):

...

Режиссер: ${director}
В ролях: {{tmpl(actors) "#actors_template"}}
Год: ${year}

... ${$data} {{if $data !== $item.parent.data.actors[$item.parent.data.actors.length - 1]}} , {{/if}}
И, наконец, последний пример в этом разделе показывает, как передать во вложенный шаблон аргумент options , а заодно демонстрирует, как аргумент options можно использовать для определения последнего элемента в обрабатываемом массиве (полный код примера - в файле NestedTemplates3.htm ):

...

Режиссер: ${director}
В ролях: {{tmpl(actors, { last: actors }) "#actors_template"}}
Год: ${year}

... ${$data} {{if $data !== $item.last}} , {{/if}}
Трансформация Еще одна интересная возможность jQuery Templates связана с трансформацией HTML-разметки, для чего используется тег {{wrap}} (вообще говоря, wrap - это «обертывание», но мне кажется что термин «трансформация» лучше отражает суть происходящего).

Классический пример использования тега {{wrap}} - это создание закладок:

Вот как это выглядит внутри (полный код примера - в файле Transformation1.htm ):

{{wrap(null, { viewState: $item.viewState }) "#tabsTmpl"}} English The Ballad of East and West Rudyard Kipling

OH, East is East, and West is West...

{{/wrap}}
Исходные данные для трансформации размещаются в шаблоне tabContent - именно этот шаблон я дальше будут инстанцировать.

HTML-разметка, которую я буду трансформировать, помещается в теге {{wrap}} . Для тега {{wrap}} используется точно такая же нотация вызова, что и для тега {}}
В браузере этот пример будет выглядеть так:

Кэширование шаблонов В каждом вызове $("#...").tmpl(...) происходит компиляция шаблона, что, несмотря на резко возросшую скорость работы JavaScript в современных браузерах, может крайне негативно сказаться на производительности. Разработчики jQuery Templates никак не могли обойти своим вниманием этот очевидный факт, поэтому в jQuery Templates предусмотрен механизм для предварительной компиляции и кэширования шаблонов.

Компиляция и кэширование шаблона производится следующим образом:

$("#movieTmpl").template("movieTmpl");
Скомпилированный шаблон сохраняется во внутреннем кэше jQuery Templates под именем movieTmpl . Для обращения к кэшированному шаблону используется метод jQuery.tmpl() , и первым параметром ему передается имя кэшированного шаблона:

$.tmpl("movieTmpl", dataItems).appendTo("#movieListBag");
В примере, приведенном ниже, осуществляется навигация по списку фильмов, причем для показа информации о фильме используется кэшированный шаблон.

Код шаблона практически не отличается от тех, что я использовал ранее, единственное его отличие - под описанием фильма дополнительно размещаются ссылки для навигации (полный код примера - в файле CachedTemplates.htm ):

${title}

Режиссер: ${director}
В ролях: ${actors}
Год: ${year}

{{if $item.canMoveBack}} [Назад] {{/if}} {{if $item.canMoveFwd}} [Вперед] {{/if}}
Сопутствующий скрипт так же несложен:

Var movieIndex = 0; $(function () { $("#movieTmpl").template("movieTmpl"); updateMovie(); $("#movieBag").delegate(".nav-link", "click", function () { movieIndex += parseInt($(this).attr("x-inc")); updateMovie(); }); }); function updateMovie() { $("#movieBag").empty(); $("#movieBag").append($.tmpl("movieTmpl", dataItems, { canMoveBack: movieIndex > 0, canMoveFwd: movieIndex < dataItems.length - 1 })); }
Обработчик нажатия на навигационную ссылку меняет индекс выбранного фильма, а затем вызывает функцию updateMovie() , которая сначала очищает контейнер с описанием фильма, а затем заполняет его новыми данными.

Вот как этот пример выглядит в браузере:


Браузер, конечно, загрузит соответствующий файл - но вот получить доступ к его содержимому у вас все равно не получится.

Но шаблон все-таки можно разместить в отдельном файле, и для этого потребуется буквально одна дополнительная строчка кода (полный код примера - в файле ):

$(function () { $.get("Templates/DynamicLoading.htm", {}, function (templateBody) { $.tmpl(templateBody, dataItems).appendTo("#movieListBag"); }); });
Т.к. в данном случае мы получаем шаблон в виде текста, для его инстанцирования применяется метод jQuery.tmpl() , первым аргументом которому передается полученный текст шаблона.

Да, метод jQuery.tmpl() используется для инстанцирования как кэшированных шаблонов по имени, так и шаблонов, заданных в виде текста (традиция!..) - впрочем, он достаточно «умен», чтобы отличить их друг от друга.

Если вам нужно загрузить несколько связанных шаблонов, вы можете воспользоваться библиотекой WaitSync (см. «Синхронизация асинхронных вызовов. WaitSync ») или написать свой синхронизатор (полный код примера - в файле ):

$(function () { var ws = new WaitSync(function () { $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag"); }); $.ajax({ cache: false, url: "Templates/MovieTmpl.htm", success: ws.wrap("MovieTmpl", function (templateBody) { $.template("movieTmpl", templateBody); }), error: ws.wrap("MovieTmpl", function () { alert("Error loading MovieTmpl.htm!"); }) }); $.ajax({ cache: false, url: "Templates/ActorsTmpl.htm", success: ws.wrap("ActorsTmpl", function (templateBody) { $.template("actorsTmpl", templateBody); }), error: ws.wrap("ActorsTmpl", function () { alert("Error loading ActorsTmpl.htm!"); }) }); });
Обратите внимание, что в данном случае шаблон actorsTmpl вызывается по имени (файл Templates\MovieTmpl.htm ):

Режиссер: ${director}
В ролях: {{tmpl(actors, { last: actors }) "actorsTmpl"}}
Год: ${year}

Динамическое обновление В последнем разделе практической части я покажу еще два сценария работы jQuery Templates - изменение связанных данных и подмену связанного шаблона.

В приведенном ниже примере для каждого фильма добавлена возможность изменить его рейтинг (полный код примера - в файле DynamicUpdate1.htm ):

...
Сопутствующий код:

$(function () { $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(".rating-button", "click", function () { var item = $.tmplItem(this); item.data.rating += parseInt($(this).attr("x-inc")); item.update(); }); });
Как видно, этот код очень похож на код закладок из раздела «Трансформация», только при работе с закладками я обращался к разделяемому объекту viewState , а здесь я работаю с данными, связанными с экземпляром шаблона.

В браузере этот пример выглядит так:

Следующий пример демонстрирует подмену связанного шаблона (полный код примера - в файле DynamicUpdate2.htm ):

{{tmpl "#movieMainTmpl"}}

[Больше...]

{{tmpl "#movieMainTmpl"}}

Кадры из фильма:

{{each frames}} {{/each}}

[Меньше...]


Здесь я использую два шаблона, movieShortTmpl и movieFullTmpl , общая часть которых вынесена в шаблон movieMainTmpl .

Сопутствующий код:

$(function () { var shortTemplate = $("#movieShortTmpl").template("shortTemplate"); var fullTemplate = $("#movieFullTmpl").template(); $.tmpl("shortTemplate", dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(".more-details", "click", function () { var item = $.tmplItem(this); item.tmpl = item.tmpl === shortTemplate ? fullTemplate: shortTemplate; item.update(); }); });
Думаю, этот код требует дополнительных пояснений.

Для подмены шаблона мне требуется ссылка на скомпилированный шаблон. Я получаю эти ссылки с помощью вызовов .template() . Кроме того, т.к. шаблон shortTemplate используется для рендеринга списка фильмов после загрузки страницы, я сохраняю его в кэше, чтобы иметь возможность инстанцировать его по имени.

В браузере этот пример выглядит следующим образом:

Заключение Код примеров, использованных в статье, вы можете загрузить по этой ссылке .

Загрузить jQuery Templates можно с web-сайта ASP.NET CDN или напрямую из репозитария GitHub:
Brian Landau «Benchmarking Javascript Templating Libraries ».

И в заключение я хочу выразить благодарность Виталию Дильмухаметову и Денису Гладких за ценные замечания, сделанные в процессе работы над статьей.

Теги: Добавить метки

4 октября 2010 года была опубликована об анонсе трёх плагинов 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. Плагины пока ещё не получили статус релиза, но уже активно ведется написание документации на сайте. К слову, команда Microsoft последовала традициям разработки jQuery и разместила материалы по разработке плагинов на github.com, где доступны описание и исходники плагинов.

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


jQuery Templates plugin

Начнём с простенького примера:

• ${Name} (${ReleaseYear})
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 ), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList .
В результате работы плагина мы получим такую разметку:

• The Red Violin (1998)
• Eyes Wide Shut (1999)
• The Inheritance (1976)

А теперь по сути вопроса.
Что делает плагин?
Плагин получает на вход строку шаблона и множество объектов (или один объект), которые нужно вывести в строку (или разметку) с форматированием.
Где это применяется?
В основном этот плагин полезен при динамическом выводе объектов 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 и ещё кое-что… Остальное – материал будущей статьи.

Источники

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

• (примеры взяты оттуда)
Об авторе

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

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

Примеры

Пример 1: Динамическое переключение применяемого шаблона

table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; } table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; } .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; } ${Name} ${Name}${ReleaseYear}Director: ${Director} Click for details:

var movies = [ { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" }, { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" } ]; var selectedItem = null; /* Render the summaryTemplate with the "movies" data */ $("#summaryTemplate").tmpl(movies).appendTo("#movieList"); /* Add onclick handlers for movie template items using the summary or details template */ $("#movieList") .delegate(".movieSummary", "click", function () { if (selectedItem) { // Set the template on the previously selected item // back to the summary template selectedItem.tmpl = $("#summaryTemplate").template(); selectedItem.update(); } /* Get the data structure for the template item which this clicked element belongs to, and make it the selected item */ selectedItem = $.tmplItem(this); /* Set the template on this item to the detail template */ selectedItem.tmpl = $("#detailTemplate").template(); selectedItem.update(); }) .delegate(".movieDetail", "click", function () { /* Set the template on this item to the summary template */ selectedItem.tmpl = $("#summaryTemplate").template(); selectedItem.update(); selectedItem = null; });

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

Пример 2: Вставка данных с разметкой в шаблон

.role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;} ${Name}

{{html Synopsis}}

/* The Synopsis data field contains HTML markup. */ var movie = { Name: "Meet Joe Black", Synopsis: "The grim reaper (Brad Pitt) visits Bill Parrish (Anthony Hopkins)..." }; /* Render the template with the movie data. The template uses the {{html}} template tag to insert the Synopsis HTML markup data. */ $("#movieTemplate").tmpl(movie) .appendTo("#movieContainer");

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

P.S.

Примеры не стал расписывать, если аудитория поддержит мои начинания, то можно пошагово расписать что, как и почему, и привести ещё несколько примерчиков.

Вопросы по плагину прошу задавать на форуме , если есть комменты именно по статье – то комментируйте ниже.