Различные реализации Mustache

Существует два типа шаблонов: server-side шаблоны, которые используются на сервере, когда начинается загрузка страницы, второй тип шаблонов server-side на стороне клиента, которые работают с приложениями JavaScript или с запросами Ajax.

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

Mustache.php

Копия библиотеки Mustache.php, на официальной  странице проекта GitHub . Если вы знакомы с использованием composer, рекомендуется установить Mustache, для лучшего управления зависимостями.

Добавьте следующие строки в ваш файл composer.json и запустите либо установку composer или обновления composer (по обстоятельствам):



{
    "require": {
        "mustache/mustache": "2.0.*"
    }
}


Простой пример для шаблона с Mustache.php.



render('Hello, {{planet}}!', array('planet' => 'World')); ?>


Первый загрузчик composer включен (в качестве альтернативы, вы можете использовать авто-загрузчик Mustache, если вы работаете с клоном или с загруженной копии библиотеки). Затем метод класса render() Mustache_Engine сформирует мнение, передавая его данные шаблона и некоторые изменённые значения.

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



new Mustache_Loader_FilesystemLoader('../templates')
));

$tpl = $mustache->loadTemplate('greeting');

echo $tpl->render(array('planet' => 'World'));


Загрузчик в конфигурации массива определяет путь к файлам шаблона (более подробную информацию о параметрах конфигурации можно найти в Mustache.php Wiki ). В этом случае файлы шаблонов находятся внутри каталога шаблонов. Метод LoadTemplate() загружает файл templates/greeting.mustache .

Вкратце мы рассмотрели необходимую теорию для работы с mustache, теперь мы можем посмотреть на то, как разделить шаблоны.

Совместное использование Шаблонов между PHP и JavaScript

Наша главная цель разделить шаблоны между PHP (server-side), и JavaScript (client-side). На основе нашего примера, давайте предположим, что у нас есть сайт интернет-магазин, с двумя категориями товара: Книги и Фильмы. Когда пользователь в первый раз заходит на сайт, все продукты категорий будут отображаться в одном списке, как показано ниже.

Категории товара
Категории товара

В списке видно, что описание каждого типа продукта отличаются, поэтому нам нужны отдельные шаблоны для двух разных видов товара.
Создайте два шаблона, один с названием books.mustache а другой movies.mustache. Файл books.mustache будет выглядеть так:



{{#products}}
{{#book}}

<div>
Book Title: {{title}}

Book Author: {{author}}

Book Price: {{price}}
</div>

{{/book}}
{{/products}}


Это простой шаблон из раздела с конкретными переменными. {{#products}} используется для прохода по всем элементам внутри раздела продукции массива. {{#book}} используется, чтобы проверить, если элемент является собственно книгой. Если ключа не существует, то ничего не будет показываться пользователю.

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



<?php
$books = array();
$result = $db->query('SELECT title, author, price FROM books');
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $row['book'] = true;
    $books[] = $row;
}
$result->closeCursor();

$movies = array();
$result = $db->query('SELECT name, price, cast FROM movies');
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
   $row['movie'] = true;
   $movies[] = $row;
}

$booksTmpl = $this->mustache->loadTemplate('books');
$moviesTmpl = $this->mustache->loadTemplate('movies');

$data = array(
    'products' => array_merge($books, $movies)
);
$html = $booksTmpl->render($data);
$html .= $moviesTmpl->render($data);

echo $html;


Мы используем два запроса к базе данных, чтобы вытащить данные о книгах и фильмах из базы данных и сохранить их в массив для передачи в шаблоны. В примере используется методы PDO для вывода данных, вы можете использовать свой собственный уровень абстракции базы данных или ORM, если хотите.

Шаблоны для книг и фильмов загружаются отдельно как две переменные, используя метод LoadTemplate() , при этом передаётся продукт массива каждому шаблону методом Render() . Он обрабатывает шаблон для данного продукта и возвращает HTML.

Для фильтрации результатов по видам продукции, мы могли получить все отфильтрованные книги (или фильмы), а HTML-от серверов, но все разметки будут нести дополнительные расходы для каждого запроса. Нам абсолютно не нужно, отправлять ту же разметку снова и снова. На стороне клиента шаблоны начнут работать, и мы можем сохранять необходимые шаблоны в памяти клиента и загрузку данных с сервера с помощью Ajax.

Чтобы создать шаблоны, доступные для клиента, они могут быть введены в начальной странице запроса с тегом <script> для будущего использования JavaScript. Код внутри этих тегов не будет отображаться, и они не будут выполняться с JavaScript, если вы укажите тип text/mustache.



<script id="booksTmpl" type="text/mustache">
<?php
echo file_get_contents(dirname(__FILE__) . '/templates/books.mustache');
?>
</script>
<script id="moviesTmpl" type="text/mustache">
<?php
echo file_get_contents(dirname(__FILE__) . '/templates/movies.mustache');?>
</script>


Для того, чтобы использовать эти шаблоны в JavaScript, мы просто должны подключить библиотеку Mustache.js в документ. Вы можете получить копию mustache.js файла из страницы GitHub и подключить его в HTML следующим образом:



<script type="text/javascript" src=
http://pixelcom.crimea.ua/"mustache.js"></script>


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



<script>
$("#booksFilter").click(function () {
   $.ajax({
       type: "GET",
       url: "ajax.php?type=books"
   }).done(function (msg) {
       var template = $("#booksTmpl").html();
       var output = Mustache.render(template, msg);
       $("#products").html(output);
   });
});
</script>


Список книг извлекается из базы данных, и возвращается для клиента в формате JSON, и тогда мы получаем шаблон книг в рамках своего сценария с помощью тега $("#booksTmpl").html() и передаём его как шаблон и данных на сторону клиента. Потом с генерированный код, возвращается обратно на страницу в категории продукции.

Заключение

Работа с отдельными движками шаблонов как на стороне клиента так и на стороне сервера может быть сложной задачей, и может привести к дублированию шаблона. К счастью, различные реализации Mustache позволяют разделить те же шаблоны между обеими сторонами. Это повышает пригодность вашего кода.

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

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

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