Feb 3 2012 at 17:18

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

Invite pending

Наверняка многие знакомы с какой-нибудь серверной системой шаблонов, например, 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>
Затем определяем данные, которые будут выводиться. Это может быть результат запроса к базе данных или предопределенный массив, например:<br /><br /><source lang="javascript">
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>

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

Tags:

javascript

Hubs:

Lumber room