Связанные шаблоны плагина jQuery Template
В предыдущем уроке серии мы рассмотрели простой пример использования плагина jQuery Template, разработанного командой Microsoft Ajax Core. Теперь разберем связанные шаблоны, которые позволяют полностью контролировать структуру документа.
Связывание одного шаблона с другим является замечательным свойством, которое позволяет строить модульную структуру документа. Вместо создания одного монстрообразного шаблона для реализации сценария мы можем разбить его на несколько отдельных частей и связать их между собой.
Допустим, у нас есть данные:
var clientData = [ { name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] }, { name: "Mark Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] }, { name: "Jen Statford", age: "25", id: 3, phone: ["954-600-1234", "954-355-5555"] } ];
Нужно выводить информацию о имени и возрасте в одном шаблоне, а телефонный номер отображать в другом.
Опираясь на знания из предыдущего урока серии создаем шаблон для нашей страницы:
<script id="clientTemplate" type="text/html"> <p><a href="/clients/${id}">${name} - Age: ${age}</a></p> </script>
Здесь мы выводим имя и возраст в ссылке, которая заключена в тег параграфа. Затем мы создаем другой шаблон для вывода номера телефона каждого клиента:
<script id="phoneTemplate" type="text/html"> <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul> </script>
И будем вызывать шаблон “phoneTemplate” из основного шаблона с помощью тега “tmpl”. Данный тег используется плагином для идентификации шаблонов и их разбора. Вызов имеет вид:
{{tmpl($data) "#phoneTemplate"}}
А основной шаблон будет выглядеть так:
<script id="clientTemplate" type="text/html"> <p><a href="/clients/${id}">${name} - Age: ${age}</a></p> {{tmpl($data) "#phoneTemplate"}} </script>
А в результате его работы будет выведена страница:
Взглянем на структуру:
{{tmpl($data) "#phoneTemplate"}}
Переменная “$data” содержит данные, полученные парсером для текущей записи. Они передаются в связанный шаблон, которые теперь может работать с записью. посмотрим в связанный шаблон:
<script id="phoneTemplate" type="text/html"> <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul> </script>
Теперь текущая запись передается в него и можно использовать имя атрибута, в примере - “phone”, для организации цикла по всем номерам телефона с помощью тега шаблона ‘{{each}}‘. Данный тег очень похож на метод jQuery $.each() или на цикл JavaScript “for”. Код пройдет циклом по всем записям телефонов, создаст список и передаст его основному шаблону.
Полностью код страницы выглядит следующим образом:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex" /> <title>Тест шаблона</title> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script src="/jquery.tmpl.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var clientData = [ { name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] }, { name: "Mark Goldberg", age: 51, id: 2, phone: ["617-777-1234", "617-222-3333"] }, { name: "Jen Statford", age: "25", id: 3, phone: ["608-555-5647", "608-645-8855"] } ]; $("#clientTemplate").tmpl(clientData).appendTo("div"); }); </script> <script id="clientTemplate" type="text/html"> <p><a href="/clients/${id}">${name} - Age: ${age}</a></p> {{tmpl($data) "#phoneTemplate"}} </script> <script id="phoneTemplate" type="text/html"> <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul> </script> </head> <body> <div></div> </body> </html>
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/h5gSaMzttLo/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Ничто так сильно не разрушает человека, как продолжительное бездействие. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.