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

13

Від автора: бувають ситуації, коли JavaScript додаток, формує контент, який згодом необхідно відобразити на екрані. При цьому, якщо контент не великий, то дана задача вирішується досить просто, шляхом використання спеціальних методів.

Але що робити, якщо контент досить складний і для його відображення необхідно використовувати, складний дизайн, який формується величезною кількістю тегів HTML.

Звичайно, за великим рахунком дана завдання вирішується шляхом використання стандартних методів щодо відображення даних, але при цьому, всі елементи оформлення будуть додані безпосередньо в код скрипта, що зробить його дуже складним для розуміння і редагування. У цьому випадку найкраще рішення – це повне відділення логіки скрипта від його дизайну, шляхом використання шаблонів – для зберігання дизайну, і шаблонизатора для передачі і відображення даних.

Тому в даному уроці ми з Вами розглянемо простий шаблонизатор для мови JavaScriрt: jQuery.loadTemplate, який являє собою плагін для бібліотеки jQuery і називається jquery.loadTemplate.

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

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

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

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

На його єдиною сторінці розташовується кнопка «Отримати», після натискання на яку буде виконано запит на сервер до файлу 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».

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

У скачаному архіві міститься каталог «jquery-loadTemplate», в якому розташовується актуальна версія плагіна в двох варіантах – звичайному і стислому, з якого видалено все зайве, що не беруть участь в логіці символи (пробіли, переклади рядків і т. д).

Простий JavaScript шаблонизатор 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, який необхідний для посилань. При цьому для тегів також необхідний контент, тобто заголовок посилання, який формується атрибутом data-content.

Як Ви бачите, у шаблоні використовуються змінні, а отже, їх необхідно передати за допомогою шаблонизатора. Тому, у файлі script.js, виконаємо деякі правки.

jQuery(‘document’).ready(function () {
$(‘#button’).click(function () {
$.ajax({
url: «script.php»,
dataType:’json’,
success:function (html) {
var templ = $(‘#template-container’);
templ.loadTemplate($(«#template»),{
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 вибірку даного блоку, ми передаємо в якості першого параметра, при виклику метода. В якості другого параметра, передаємо літерал об’єкта, у властивостях якого, визначені змінні, які необхідно передати в шаблон. Далі, оновлюємо інформацію в браузері.

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

Тобто ми відокремили логіку скрипта від його подання.

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

jQuery(‘document’).ready(function () {
$(‘#button’).click(function () {
$.ajax({
url: «script.php»,
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(«templates/template.html»,data);
}
});
});
});

При цьому, якщо передати при виклику методу loadTemplate() в якості другого параметра, масив об’єктів, то зацікавив шаблон, буде відпрацьовувати стільки разів, скільки клітинок міститься в переданому параметрі.

jQuery(‘document’).ready(function () {
$(‘#button’).click(function () {
$.ajax({
url: «script.php»,
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(«templates/template.html»,data);
}
});
});
});

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

Таким чином, як би в циклі, шаблонизатор обходить передається масив та відображає дані на екран.

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

Працюючи з шаблонизатором, ми можемо визначити власні формати відображення даних одного і того ж шаблону. Для створення формату, необхідно використовувати метод addTemplateFormatter().

jQuery(‘document’).ready(function () {
$(‘#button’).click(function () {
$.ajax({
url: «script.php»,
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(«templates/template.html»,data);
}
});
});
});

Даний метод, приймає як параметр літерал об’єкта, у властивостях якого визначені формати. По суті, формат – це звичайна властивість, значення, якого використовується функція обробник, код якої виконається, якщо зазначений формат, буде доданий до деякого блоку шаблону. Функція обробник, в якості першого параметра, приймає вміст блоку, а в якості другого – значення спеціального атрибута «data-format-options». Відповідно в коді функції, ми можемо виконати абсолютно довільні маніпуляції, з контентом, які з’являтимуться на екрані.

<h1 data-content=»title» data-format=»MyFormat» data-format-options=»upper»></h1>
<a data-link=»path» data-content=»zag»></a>
<img width=»200px» data-src=»src» />
<p data-content=»date»></p>

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

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

Атрибут «data-template-bind» – атрибут загального застосування, який необхідний для передачі змінних, формування блоків select, а так само блоків з різними нестандартними атрибутами. Давайте трохи змінимо шаблон відображення даних на екран.

<h1 data-content=»title» data-format=»MyFormat» data-format-options=»upper»></h1>
<a data-link=»path» data-content=»zag»></a>
<img width=»200px» data-src=»src» />
<p data-content=»date»></p>

Зверніть увагу, що атрибут «data-template-bind», приймає в якості значення рядок формату JSON, в якій міститься масив об’єктів. В даному об’єкті обов’язково необхідно визначити властивість «attribute», в якому буде вказаний атрибут блоку, для подальшого формування (тобто ім’я атрибута).

Наприклад, для формування посилання (тег a), необхідний атрибут href, в якому зберігається шлях посилання. Отже визначаємо властивість «attribute», значення якого використовується рядок»href», і далі створюємо властивість «value», в якому містяться значення, для майбутнього атрибута (тобто вміст атрибута). Атрибут «alt», формується аналогічно. Значення «content» для властивості «attribute», необхідно для формування контенту блоку.

Тепер розберемо створення списку select.

<select data-template-bind='[
{«attribute» : «options», «value»:{«value»:»opt»,»content»:»contopt»,»data»:»option»}}
]’>
</select>

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

value – значення атрибута value, для кожного тега option – являє собою ім’я змінної, в якій збережено значення;

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

data – масив, в якому зберігаються змінні для вище зазначених властивостей.

Код файлу script.js для формування списку.

jQuery(‘document’).ready(function () {
$(‘#button’).click(function () {
$.ajax({
url: «script.php»,
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(«templates/template.html»,data);
}
});
});
});

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!