От автора: при разработке собственного скрипта или сайта всегда возникает вопрос как и по какому принципу отображать данные на его страницах. Наилучший способ — это полное отделение логики веб-приложения от его дизайна, что предусматривает шаблон проектирования MVC. Но если для отображения данных используются шаблоны, то как реализовать шаблонизатор, который будет подгружать необходимые шаблоны и передавать определенный набор данных?
В данному уроке, мы поговорим о достаточно интересном и быстро набирающем популярность шаблонизаторе, который в прямом смысле лишен логики — его название Mustache.
Установка
Mustache — шаблонизатор, который содержит минимум управляющей логики и доступен для различных языков программирования. Он доступен как для серверных языков программирования (PHP, Ruby и т.д.), а так же и для клиентских (Javascript). Для установки данного шаблонизатора, переходим по адресу //mustache.github.io/:
Далее кликаем по ссылке PHP, при этом нас перенаправят на страницу скачивания шаблонизатора Mutache, для использования в среде языка PHP (в данном уроке мы будем рассматривать применение шаблонизатора для скриптов PHP).
Затем кликаем по ссылке Download ZIP и скачиваем исходник шаблонизатора Mustache в виде ZIP архива. В результате распаковки мы получаем папку mustache.php-master, в которой нас интересует содержимое каталога src, в котором расположена папка Mustache – это и есть собственно шаблонизатор Mustache. Данную папку мы скопируем в каталог lib нашего тестового проекта, либо Вы можете скопировать данный каталог в любую произвольную директорию Вашего проекта, где хранятся сторонние библиотеки.
Также обратите внимание, что на странице скачивания шаблонизатора (в самом низу) присутствует ссылка на страницу документации по шаблонизатору Mustache.
Далее необходимо подключить файл Autoloader.php, в котором описан механизм автоматической загрузки классов шаблонизатора. Для тестирования, я создал пустой файл index.php, который будет представлять собой главную страницу нашего тестового проекта. В данный файл мы и подключим необходимый файл шаблонизатора.
|
1 |
require "lib/Mustache/Autoloader.php"; |
Затем, обращаясь к классу Mustache_Autoloader, вызываем метод register(), которые регистрирует методы автоматической загрузки классов.
|
1 |
Mustache_Autoloader::register(); |
На этом установка шаблонизатора завершена.
Простейший шаблон
Для начала работы с шаблонизатором, первым делом необходимо создать объект главного класса Mustache_Engine:
|
1 |
$m = new Mustache_Engine; |
По умолчанию шаблонизатор Mustache работает с шаблонами, которые представляют собой обычную строку, либо набор строк(то есть шаблон – это значение строкового типа). Поэтому создадим простейший шаблон и сохраним его в переменной:
|
1 |
$tpl = '<h2>Hello {{name}} {{foo}}</h2>'; |
В шаблоне, конструкция {{name}} – это отображение на экран значения переменной с экранированием HTML-сущностей, где name – это имя переменной. При этом в качестве переменной мы можем передать значение, возвращаемое анонимной функцией.
Далее создадим массив, ячейки которого будут переданы в шаблон:
|
1 2 3 4 5 6 7 |
$param = array( 'name'=>'Vasya', 'foo' => function() { return 'world'; } ); |
При этом имена ключей массивы – это имена переменных передаваемых в шаблон, соответственно – значения ячеек – это значения передаваемых переменных. Далее, вызываем метод render(), объекта класса Mustache_Engine, которые передаст переменные из массива $param в шаблон $tpl, и вернет полностью готовый код к отображению на экран, который можно отобразить при помощи функции echo:
|
1 |
echo $m->render($tpl,$param); |
При этом на экране мы увидим следующее:
То есть, как Вы видите, мы успешно отобразили данные на экране, использовав простейший шаблон. Переменные в шаблон можно передавать, используя объекты специальных классов. К примеру, создадим папку views, в которой будем хранить виды (Views) для тестового сайта. Далее в данной папке создадим файл main.php, с классом View:
|
1 2 3 4 5 6 7 8 9 |
<?php class View { public $name = '<h2>Vasya</h2>'; public function foo() { return $this->name.' - METHOD'; } } |
При этом имена свойств данного класса должны совпадать с именами переменных, которые должны быть переданы в шаблонизатор. Так же можно использовать метод класса, имя которого совпадает с именем передаваемой переменной. При этом метод должен вернуть некое значение, которое будет передано в шаблон.
Для передачи свойств класса, в качестве переменных в шаблон, необходимо создать объект данного класса и передать его в качестве второго параметра в метод render():
|
1 2 |
$param = new View; echo $m->render($tpl,$param); |
При этом на экране мы увидим следующее:
Обратите внимание что значения переменных экранируются, если необходимо отменить экранирование, значит необходимо отображать значение переменной в шаблоне используя {{{name}}}:
|
1 |
$tpl = '<h2>Hello {{{name}}} {{{foo}}}</h2>'; |
Загрузка шаблонов из файлов
Использование строк в качестве шаблонов, не совсем удобно, поэтому, давайте реализуем загрузку шаблонов из файлов. Для начала, используя, стандартный загрузчик шаблонов, укажем путь к папке с шаблонами (в каталоге views создадим папку для хранения шаблонов — template):
|
1 |
$loader = new Mustache_Loader_FilesystemLoader(dirname(__FILE__) . '/views/template',array('extension'=>'.html')); |
Конструктору класса Mustache_Loader_FilesystemLoader, в качестве первого параметра, передаем путь к папке с шаблонами, а в качестве второго параметра передаем массив настроек, в котором указываем расширение файлов с шаблонами (по умолчанию расширение файлов шаблонов .mustache). Создаем шаблон – файл index.html со следующим содержимым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<p>Hello</p> {{{name}}} {{#if_else}} <h2> - IF -</h2> {{/if_else}} {{^if_else}} <h2> - else -</h2> {{! string comment}} {{/if_else}} {{#listt}} <p>{{name}} | {{email}}</p> {{/listt}} {{#arr}} <strong>{{.}}</strong>{{/arr}} {{> footer}} |
Далее загружаем шаблон, используя загрузчик, и отображаем его содержимое на экране.
|
1 2 |
$tpl = $loader->load('index'); echo $m->render($tpl,$param); |
Условные операторы и обход массивов
Вы наверное заметили, что в шаблоне я использовал следующий блок {{#if_else}}{{/if_else}} – это секция, которая представляет собой парный тег, где if_else – это переменная секции. Ее действие зависит от типа данных, с которыми она работает (то есть, что собой представляет переменная секции). Если переменная секции соответствует значению, которое можно интерпретировать как TRUE, или FALSE, значит, секция работает как обычный оператор PHP if. При этом секция {{^if_else}}{{/if_else}} – это ни что иное как блок else (если соблюдается предыдущее условие).
Поэтому в классе View, добавим свойство public $if_else = FALSE:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php class View { public $name = '<h2>Vasya</h2>'; public $if_else = FALSE; public function foo() { return $this->name.' - METHOD'; } } |
На экране мы увидим следующее:
Если же свойство $if_else будет равно TRUE, то на экране мы увидим следующее:
Если же переменная секции представляет собой массив, то данная секция будет работать по принципу цикла foreach, то есть шаблонизатор выполнит обход по всем ячейкам массива. К примеру, в класс View мы добавим следующий метод:
|
1 2 3 4 5 6 7 |
public function listt() { return array( array('name'=>'Viktor','email'=>'email1'), array('name'=>'Sergey','email'=>'email2'), array('name'=>'Anna','email'=>'email3') ); } |
Как видите метод listt, возвращает массив, соответственно данный массив попадает в секцию listt, а значит, шаблонизатор обойдет каждую его ячейку и поэтому в коде секции, мы можем обращаться к ключам данного массива, для получения их значений. На экране мы увидим следующее:
Для обхода одномерных индексных массивов, используется тег {{.}}:
|
1 2 3 |
public function arr() { return array('first','second','third'); } |
На этом данный урок завершен. Надеюсь, Вас заинтересовал данный шаблонизатор и Вы будете использовать его в своих наработках.
Всего Вам доброго и удачного кодирования!!!
