Вы используете шаблоны JavaScript?

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

Наверняка многие читатели знакомы с какой-нибудь серверной системой шаблонов, например, Smarty или Cheetah. Но есть шаблон, который выполняется на стороне клиента - плагин jQuery Template, созданный в недрах Microsoft. В современных условиях усложнения веб приложений его использование имеет ясный практический смысл.

Он позволяет легко строить структуру содержания без трудного и путающего связывания строк. Например, есть набор данных, в которых содержится ID и имя. Нужно вывести имя как ссылку.

Задачу можно решить так:

var clRec = "";
 
for(var i=0; i<client.name.length; i++) {
    clRec += "<li><a href='clients/"+client.id[i]+"'>" + client.name[i] + "</a></li>";
}

Но более наглядное решение выглядит вот так:

<li><a href="/clients/${id}">${name}</a></li>

Второй вариант кода является шаблоном для построения списка ссылок имен. Чтобы использовать такой вариант, надо сначала включить в текст страницы jQuery и плагин jQuery Template:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.tmpl.js" type="text/javascript"></script>

Затем определяем данные, которые будут выводиться. Это может быть результат запроса к базе данных или предопределенный массив, например:

var clientData = [
    { name: "Rey Bango", id: 1 },
    { name: "Mark Goldberg", id: 2 },
    { name: "Jen Statford", id: 3 }
];

А затем определяем шаблон:

<script id="clientTemplate" type="text/html">
    <li><a href="/clients/${id}">${name}</a></li>
</script>

Тег script необходим. Он используется для встраивания шаблона в текст страницы. Обратите внимание, что используются заменители ${id} и ${name} с теми же именами, которые определены для идентификаторов в наборе данных. Структура “${}” сообщает парсеру шаблона, что поля необходимо заменить на соответствующее значение.

Остается вызвать плагин jQuery Template для формирования кода страницы из шаблона:

$("#clientTemplate").tmpl(clientData).appendTo( "ul" );

Метод .tmpl() получит определенные нами данные и проведет анализ выбранного шаблона. Затем метод jQuery .appendTo() результат к тегу неупорядоченного списка. В результате работы будет выведена структура:

Все достаточно просто.

А в целом код нашей страницы будет выглядеть так:

<!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", id: 1 },
        { name: "Mark Goldberg", id: 2 },
        { name: "Jen Statford", id: 3 }
    ];
 
$("#clientTemplate").tmpl(clientData).appendTo( "ul" );
 
});
  </script>
 
 <script id="clientTemplate" type="text/html">
    <li><a href="/clients/${id}">${name}</a></li>
</script>
 
</head>
 
<body>
 
<ul></ul>
 
</body>
</html>

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/wgRhlc5l1Nw/lessons.php

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

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



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

Вы используете шаблоны JavaScript? | | 2012-06-19 12:00:14 | | Статьи Web-мастеру | | Этот урок связан с проектом Небольшое введение в использование плагина jQuery TemplateНаверняка многие читатели знакомы с какой-нибудь серверной системой шаблонов, например, Smarty или Cheetah. Но | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: