Простой JavaScript шаблонизатор jQuery.loadTemplate

Простой JavaScript шаблонизатор jQuery.loadTemplate

От автора: бывают ситуации, когда JavaScript приложение, формирует контент, который впоследствии необходимо отобразить на экране. При этом, если контент не большой, то данная задача решается достаточно просто, путем использования специальных методов.

Но что делать, если контент достаточно сложен и для его отображения необходимо использовать, сложный дизайн, который формируется огромным количеством тегов HTML.

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

Поэтому в данном уроке мы с Вами рассмотрим простой шаблонизатор для языка JavaScriрt: jQuery.loadTemplate, который представляет собой плагин для библиотеки jQuery и называется jquery.loadTemplate.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Установка плагина

Перед установкой плагина, давайте рассмотрим тестовый сайт, который я буду использовать для данного урока (сайт очень простой).

На его единственной странице располагается кнопка “Получить данные”, по нажатию на которую – будет выполнен запрос на сервер к файлу script.php. Данный скрипт выполнит соединение с базой данных и осуществит выборку определенных данных, которые будут возвращены для отображения на экран.

HTML код главной страницы (файл index.html).

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/style.css"/>
		<title>JavaScript</title>
		
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/script.js"></script>
	
	</head>
	<body>
		<div class="wrap">
			<div class="karkas">
				<div id="template-container"></div>
				<input id="button" type="button" value="Получить данные" />
			</div>    	
		</div>
	</body>
</html>

Обратите внимание, что на данной странице подключена библиотека jQuery, а также файл script.js, код которого приведен ниже.

jQuery('document').ready(function () {
	
	$('#button').click(function () {
		$.ajax({
			url: "script.php",
			dataType:'json',
			success:function (html) {
				var templ = $('#template-container');
				templ.append('<h1>' + html.title + '</h1>');
				templ.append('<p>' + html.date + '</p>');
				templ.append('<div>' + html.anons + '</div>');
			}
		});
	});
});

Как Вы видите, функция обработчик, в параметре “success”, содержит помимо логики, дизайнерские элементы (теги html), которые необходимы для правильного отображения данных. Собственно в данном уроке мы с помощью плагина jquery.loadTemplate, постараемся отделить логику от представления.

Теперь давайте установим плагин jquery.loadTemplate. Для этого переходим на официальный сайт, данного плагина и кликаем по ссылке “Download .zip”.

В скачанном архиве, содержится каталог “jquery-loadTemplate”, в котором располагается актуальная версия плагина в двух вариантах – обычном и сжатом, из которого удалены все лишние, не участвующие в логике символы (пробелы, переводы строк и т.д).

Соответственно, копируем, к примеру, сжатую версию плагина и добавляем в корень каталога, в котором хранятся скрипты языка JavaScript. Далее данный файл необходимо подключить к тестовому сайту.

<script src="js/jquery.loadTemplate-1.5.0.min.js"></script>

На этом установка плагина завершена.

Работа с шаблонами

Теперь в файле index.html в блоке head, разместим следующий код.

<script type="text/html" id="template">
	    <h1 data-content="title"></h1>
	    <p data-content="date"></p>
	    <img data-src="src"/>
	    <div data-content="anons"></div>
	    <a data-link='path' data-content='zag'></a>
	</script>

Данный код, представляет собой шаблон для шаблонизатора “jquery.loadTemplate”. В каждом из тегов шаблона, использованы нестандартные атрибуты, которые представляют собой управляющие конструкции для шаблонизатора:

data-content – формирует контент блока, то есть данные которые отображаются между открывающим и закрывающим тегом. В качестве значения указывается имя переменной, значение которой будет добавлено в качестве контента блока;

data-src – формирует атрибут “src”;

data-link – формирует атрибут “href”, который необходим для ссылок. При этом для тегов <a> также необходим контент, то есть заголовок ссылки, который формируется атрибутом data-content.

Как Вы видите, в шаблоне используются переменные, а значит, их необходимо передать при помощи шаблонизатора. Поэтому, в файле script.js, выполним некоторые правки.

jQuery('document').ready(function () {
	$('#button').click(function () {
		$.ajax({
			url: &quot;script.php&quot;,
			dataType:'json',
			success:function (html) {
				var templ = $('#template-container');
				
				templ.loadTemplate($(&quot;#template&quot;),{
					title : html.title,
					date : html.date,
					anons : html.anons,
					src : 'img/1.jpg',
					path : 'http://yandex.ru',
					zag : 'Yandex',
					
				});
			}
		});
	});
});

Итак, первым делом выбираем при помощи библиотеки jQuery, блок в котором будут располагаться данные (в котором будет отображен шаблон с данными), в нашем случае это блок div, с идентификатором ‘template-container’. Далее вызываем на исполнение метод loadTemplate(), который загрузит шаблон и передаст необходимые переменные. Шаблон, для отображения данных, мы с Вами определили в блоке script с идентификатором «template», поэтому jQuery выборку, данного блока, мы передаем в качестве первого параметра, при вызове метода. В качестве второго параметра, передаем литерал объекта, в свойствах которого, определены переменные, которые необходимо передать в шаблон. Далее, обновляем информацию в браузере.

То есть мы отделили логику скрипта от его представления.

Теперь давайте, вынесем содержимое шаблона в отдельный файл. Для этого, создадим в каталоге templates, файл под названием template.html, в который добавим код шаблона (содержимое блока script). При этом в качестве первого параметра, при вызове метода loadTemplate(), необходимо передать путь шаблону, а также вынесем в отдельную переменную, передаваемые переменные.

jQuery('document').ready(function () {
	$('#button').click(function () {
		$.ajax({
			url: &quot;script.php&quot;,
			dataType:'json',
			success:function (html) {
				var templ = $('#template-container');
				var data = {
					title : html.title,
					date : html.date,
					anons : html.anons,
					src : 'img/1.jpg',
					path : 'http://yandex.ru',
					zag : 'Yandex',
					
				}
				
				templ.loadTemplate(&quot;templates/template.html&quot;,data);
			}
		});
	});
}); 

При этом, если передать при вызове метода loadTemplate() в качестве второго параметра, массив объектов, то интересующий шаблон, будет отрабатывать столько раз, сколько ячеек содержится в передаваемом параметре.

jQuery('document').ready(function () {
	$('#button').click(function () {
		$.ajax({
			url: &quot;script.php&quot;,
			dataType:'json',
			success:function (html) {
				var templ = $('#template-container');
				var data = 
				
				[
					{
						title : html.title,
						date : html.date,
						anons : html.anons,
						src : 'img/1.jpg',
						path : 'http://yandex.ru',
						zag : 'Yandex',
						
					},
					{
						title : html.title,
						date : html.date,
						anons : html.anons,
						src : 'img/1.jpg',
						path : 'http://yandex.ru',
						zag : 'Yandex',
						
					}
				]	
				
				templ.loadTemplate(&quot;templates/template.html&quot;,data);
			}
		});
	});
});

Таким образом, как бы в цикле, шаблонизатор обходит передаваемый массив и отображает данные на экран.

Форматы отображения данных

Работая с шаблонизатором, мы можем определить собственные форматы отображения данных, одного и того же шаблона. Для создания формата, необходимо использовать метод addTemplateFormatter().

jQuery('document').ready(function () {
	$('#button').click(function () {
		$.ajax({
			url: &quot;script.php&quot;,
			dataType:'json',
			success:function (html) {
				var templ = $('#template-container');
				$.addTemplateFormatter({
					MyFormat : function(value,options) {
						if(options == 'upper') {
							return value.toUpperCase();
						}
						
						if(options == 'other') {
							return '|' + value + '|';
						}
					}
				});
				var data = {
					title : html.title,
					date : html.date,
					anons : html.anons,
					src : 'img/1.jpg',
					path : 'http://yandex.ru',
					zag : 'Yandex',
					
				}
				templ.loadTemplate(&quot;templates/template.html&quot;,data);
			}
		});
	});
}); 

Данный метод, принимает в качестве параметра литерал объекта, в свойствах которого определены форматы. По сути, формат – это обычное свойство, в качестве значения, которого используется функция обработчик, код которой выполнится, если указанный формат, будет добавлен к некоторому блоку шаблона. Функция обработчик, в качестве первого параметра, принимает контент блока, а в качестве второго – значение специального атрибута “data-format-options”. Соответственно в коде функции, мы можем выполнить абсолютно произвольные манипуляции, с контентом отображаемым на экране.

&lt;h1 data-content=&quot;title&quot; data-format=&quot;MyFormat&quot; data-format-options=&quot;upper&quot;&gt;&lt;/h1&gt;
&lt;a data-link=&quot;path&quot; data-content=&quot;zag&quot;&gt;&lt;/a&gt;
&lt;img width=&quot;200px&quot; data-src=&quot;src&quot; /&gt;
&lt;p data-content=&quot;date&quot;&gt;&lt;/p&gt;

Атрибут data-template-bind

Атрибут “data-template-bind” – атрибут общего применения, который необходим для передачи переменных, формирования блоков select, а так же блоков с различными нестандартными атрибутами. Давайте немного изменим шаблон отображения данных на экран.

&lt;h1 data-content=&quot;title&quot; data-format=&quot;MyFormat&quot; data-format-options=&quot;upper&quot;&gt;&lt;/h1&gt;
&lt;a data-link=&quot;path&quot; data-content=&quot;zag&quot;&gt;&lt;/a&gt;
&lt;img width=&quot;200px&quot; data-src=&quot;src&quot; /&gt;
&lt;p data-content=&quot;date&quot;&gt;&lt;/p&gt;
	
<a data-template-bind='[
		{"attribute":"href","value":"post"},
		{"attribute":"alt","value":"post2"},
		{"attribute":"content","value":"pat2"}
]'></a>

Обратите внимание, что атрибут “data-template-bind”, принимает в качестве значения, строку формата JSON, в которой содержится массив объектов. В данном объекте обязательно необходимо определить свойство “attribute”, в котором будет указан атрибут блока, для дальнейшего формирования (то есть имя атрибута).

К примеру, для формирования ссылки (тег a), необходим атрибут “href”, в котором будет хранится путь ссылки. Значит – определяем свойство «attribute», в качестве значения которого, используется строка»href», и далее создаем свойство “value”, в котором будет содержатся значение, для будущего атрибута (то есть содержимое атрибута). Атрибут “alt”, формируется аналогично. Значение “content” для свойства “attribute”, необходимо для формирования контента блока.

Теперь разберем создание выпадающего списка select.

&lt;select data-template-bind='[
	{&quot;attribute&quot; : &quot;options&quot;, &quot;value&quot;:{&quot;value&quot;:&quot;opt&quot;,&quot;content&quot;:&quot;contopt&quot;,&quot;data&quot;:&quot;option&quot;}}
		]'&gt;
&lt;/select&gt;

Основа выпадающего списка – это варианты выбора, то есть теги option, которые автоматически сформирует шаблонизатор, если в свойстве «attribute», будет сохранено значение «options». При этом, в атрибут «value», необходимо добавить строку формата JSON, в которой будет сохранен объект, со следующими свойствами:

value – значение атрибута value, для каждого тега option – представляет собой имя переменной, в которой сохранено значение;

content – заголовок блока option;

data – массив в котором сохранены переменные для выше указанных свойств.

Код файла script.js, для формирования выпадающего списка.

jQuery('document').ready(function () {
	$('#button').click(function () {
		$.ajax({
			url: &quot;script.php&quot;,
			dataType:'json',
			success:function (html) {
				var templ = $('#template-container');
				$.addTemplateFormatter({
					MyFormat : function(value,options) {
						if(options == 'upper') {
							return value.toUpperCase();
						}
						
						if(options == 'other') {
							return '|' + value + '|';
						}
					}
				});
				var data = {
					title : html.title,
					date : html.date,
					anons : html.anons,
					src : 'img/1.jpg',
					path : 'http://yandex.ru',
					zag : 'Yandex',
					option	: [
								
								{opt:'1',contopt:'test1'},
								{opt:'2',contopt:'test2'},
								{opt:'3',contopt:'test3'}
								
								],
					
				}
				templ.loadTemplate(&quot;templates/template.html&quot;,data);
			}
		});
	});
});

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree