Mustache — шаблонизатор без логіки

124

Від автора: при розробці власного скрипта або сайту завжди виникає питання як і за яким принципом відображати дані на його сторінках. Найкращий спосіб — це повне відділення логіки веб-додатки від його дизайну, що передбачає шаблон проектування MVC. Але якщо для відображення даних використовуються шаблони, як реалізувати шаблонизатор, який буде довантажувати необхідні шаблони і передавати певний набір даних?

У даному уроці ми поговоримо про досить цікавий і швидко завойовує популярність шаблонизаторе, який в прямому сенсі позбавлений логіки — його назва Mustache.

Mustache — шаблонизатор без логікиMustache — шаблонизатор без логіки

Установка

Mustache — шаблонизатор, який містить мінімум керуючої логіки і доступний для різних мов програмування. Він доступний як для серверних мов програмування (PHP, Ruby і т. д.), а так само і для клієнтських (Javascript). Для встановлення даного шаблонизатора, переходимо за адресою http://mustache.github.io/:

Mustache — шаблонизатор без логіки

Далі клікаєм по посиланню PHP, при цьому нас скеровано на сторінку скачування шаблонизатора Mutache, для використання в середовищі мови PHP (у даному уроці ми будемо розглядати застосування шаблонизатора для скриптів PHP).

Mustache — шаблонизатор без логіки

Потім клацаємо по посиланню Download ZIP і викачуємо ісходник шаблонизатора Mustache у вигляді ZIP-архіву. В результаті розпакування ми отримуємо папку mustache.php-master, в якій нас цікавить вміст каталогу src, в якому розташована папка Mustache – це і є власне шаблонизатор Mustache. Дану папку ми скопіюємо в каталог lib нашого тестового проекту, або Ви можете скопіювати цей каталог в будь-яку директорію Вашого проекту, де зберігаються сторонні бібліотеки.

Також зверніть увагу, що на сторінці скачування шаблонизатора (в самому низу) присутнє посилання на сторінку документації по шаблонизатору Mustache.

Далі необхідно підключити файл Autoloader.php, в якому описаний механізм автоматичного завантаження класів шаблонизатора. Для тестування, я створив порожній файл index.php, який буде представляти собою головну сторінку нашого тестового проекту. У даний файл і ми підключимо необхідний файл шаблонизатора.

require «lib/Mustache/Autoloader.php»;

Потім, звертаючись до класу Mustache_Autoloader, викликаємо метод register(), які реєструє методи автоматичного завантаження класів.

На цьому установка шаблонизатора завершена.

Найпростіший шаблон

Для початку роботи з шаблонизатором, насамперед необхідно створити об’єкт головного класу Mustache_Engine:

$m = new Mustache_Engine;

За замовчуванням шаблонизатор Mustache працює з шаблонами, які являють собою звичайну рядок, або набір рядків(тобто шаблон – це значення рядкового типу). Тому створимо найпростіший шаблон і збережемо його в змінній:

$tpl = ‘

Hello {{name}} {{foo}}

‘;

В шаблоні, конструкція {{name}} – це відображення на екран значення змінної з екрануванням HTML-сутностей, де name – ім’я змінної. При цьому в якості змінної ми можемо передати значення, що повертається анонімної функцією.
Далі створимо масив, осередки якого будуть передані в шаблон:

$param = array(
‘name’=>’Vasya’,
‘foo’ => function() {
return ‘world’;
}
);

При цьому імена ключів масиви – це імена змінних передаються в шаблон, відповідно – значення комірок – це значення переданих змінних. Далі, викликаємо метод render(), об’єкта класу Mustache_Engine, які передасть змінні з масиву $param в шаблон $tpl, і поверне повністю готовий код для відображення на екран, який можна відобразити за допомогою функції echo:

echo $m->render($tpl,$param);

При цьому на екрані ми побачимо наступне:

Mustache — шаблонизатор без логіки

Тобто, як Ви бачите, ми успішно відобразили дані на екрані, використавши найпростіший шаблон. Змінні в шаблон можна передавати, використовуючи об’єкти спеціальних класів. Наприклад, створимо папку views, в якій будемо зберігати види (Views) для тестового сайту. Далі в даній папці створимо файл main.php з класом View:

Vasya

‘;
public function foo() {
return $this->name.’ — METHOD’;
}
}

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

Для передачі властивостей класу, в якості змінних в шаблон, необхідно створити об’єкт даного класу і передати його в якості другого параметра метод render():

$param = new View;
echo $m->render($tpl,$param);

При цьому на екрані ми побачимо наступне:

Mustache — шаблонизатор без логіки

Зверніть увагу, що значення змінних екрануються, якщо необхідно скасувати екранування, значить необхідно відображати значення змінної в шаблоні використовуючи {{{name}}}:

$tpl = ‘

Hello {{{name}}} {{{foo}}}

‘;

Mustache — шаблонизатор без логіки

Завантаження шаблонів файлів

Використання рядків в якості шаблонів, не зовсім зручно, тому, давайте реалізуємо завантаження шаблонів файлів. Для початку, використовуючи стандартний завантажувач шаблонів, вкажемо шлях до папки з шаблонами (в каталозі views створимо папку для зберігання шаблонів — template):

$loader = new Mustache_Loader_FilesystemLoader(dirname(__FILE__) . ‘/views/template’,array(‘extension’=>’.html’));

Конструктору класу Mustache_Loader_FilesystemLoader, в якості першого параметра, передаємо шлях до папки з шаблонами, а в якості другого параметра передаємо масив налаштувань, в якому вказуємо розширення файлів з шаблонами (за замовчуванням розширення файлів шаблонів .mustache). Створюємо шаблон – файл index.html з наступним вмістом:

Hello

{{{name}}}
{{#if_else}}

— IF —

{{/if_else}}
{{^if_else}}

— else —

{{! string comment}}
{{/if_else}}
{{#listt}}

{{name}} | {{e}}

{{/listt}}
{{#arr}}
{{.}}{{/arr}}
{{> footer}}

Далі завантажуємо шаблон, використовуючи завантажувач, і відображаємо його вміст на екрані.

$tpl = $loader->load(‘index’);
echo $m->render($tpl,$param);

Mustache — шаблонизатор без логіки

Умовні оператори та обхід масивів

Ви напевно помітили, що в шаблоні я використовував наступний блок {{#if_else}}{{/if_else}} – це секція, яка являє собою парний тег, де if_else – це змінна секції. Її дія залежить від типу даних, з якими вона працює (тобто, що собою являє мінлива секції). Якщо змінна секції відповідає значенню, яке можна інтерпретувати як TRUE, або FALSE, значить, секція працює як звичайний оператор PHP if. При цьому секція {{^if_else}}{{/if_else}} – це ні що інше як блок else (якщо дотримується попередня умова).

Тому в класі View, додамо властивість public $if_else = FALSE:

Vasya

‘;
public $if_else = FALSE;
public function foo() {
return $this->name.’ — METHOD’;
}
}

На екрані ми побачимо наступне:

Mustache — шаблонизатор без логіки

Якщо ж властивість $if_else буде дорівнює TRUE, то на екрані ми побачимо наступне:

Mustache — шаблонизатор без логіки

Якщо ж змінна секції являє собою масив, то дана секція буде працювати за принципом циклу foreach, тобто шаблонизатор виконає обхід по всіх комірках масиву. Наприклад, клас View ми додамо наступний метод:

public function listt() {
return array(
array(‘name’=>’Viktor’,’email’=>’email1′),
array(‘name’=>’Sergey’,’email’=>’email2′),
array(‘name’=>’Anna’,’email’=>’email3′)
);
}

Як бачите метод listt, повертає масив, відповідно даний масив потрапляє в секцію listt, а значить, шаблонизатор обійде кожну його клітинку і тому в коді секції, ми можемо звертатися до ключів даного масиву, для отримання їх значень. На екрані ми побачимо наступне:

Mustache — шаблонизатор без логіки

Для обходу одновимірних індексних масивів, використовується тег {{.}}:

public function arr() {
return array(‘first’,’second’,’third’);
}

Mustache — шаблонизатор без логіки

На цьому даний урок завершено. Сподіваюся, що Вас зацікавив даний шаблонизатор і Ви будете використовувати його у своїх напрацюваннях.

Всього Вам доброго і вдалого кодування!!!