Этот урок связан с проектом Небольшое введение в использование плагина jQuery Template

Связанные шаблоны плагина 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>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/
Перевел: Сергей Фастунов
Урок создан: 1 Февраля 2012
Просмотров: 26925
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 3 Февраля 2012 12:19
    Faraonic
    а как же поисковые системы будут с этим работать?
    • 3 Февраля 2012 17:41
      turin
      Поисковые системы не обрабатывают JS. Это надо помнить при создании шаблона и использовании AJAX
      • 4 Февраля 2012 23:37
        Чебурашка
        Сканирование AJAX. Руководство для разработчиков и веб-мастеров http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=174992
  • 3 Февраля 2012 13:46
    m.peshekhonov
    непонятно (
  • 3 Февраля 2012 21:57
    Pascalius
    Шаблоны на скока я знаю являются на данный момент мертвым проектом
    • 4 Февраля 2012 01:02
      turin
      Не знаю, на сколько мёртвым, однако весьма удобным. По личному примеру могу сказать, что использовал оные в админ панели, для генерации списка данных. Довольно удобно, когда данные собираются через ajax в виде json, а в админ-панели уже выстраиваются в необходимых местах. Однако здесь надо сказать, что в чистом виде их использовать нет смысла. Всю свою силу они показывают в связке с другими элементами JQ && JS. Перед плотным изучением шаблонов, очень советую подробнее изучить объекты JS, а так же системы "кэширования" на стороне клиента(через куки в основном), однако не сильно этим увлекаться. (размер кук ограничен, не забывайте это ;) )
^ Наверх ^