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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Связанные шаблоны плагина jQuery Template | | 2012-06-19 12:00:13 | | Статьи Web-мастеру | | В предыдущем уроке серии мы рассмотрели простой пример использования плагина jQuery Template, разработанного командой Microsoft Ajax Core. Теперь разберем связанные шаблоны, которые позволяют | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: