Главная > Блог > Web-разработка > Разное >

Mustache — шаблонизатор для JavaScript

05.07.2018

Теги: HTML • JavaScript • Web-разработка • Шаблонизатор • ШаблонСайта

Mustache — шаблонизатор, который содержит минимум управляющей логики и доступен для разных языков программирования. Его можно использовать и на сервере (PHP, Ruby и т.д.), и на клиенте (Javascript).

Шаблон пишется на простом языке, состоящем из нескольких типов тегов. Теги обрамляются двумя или тремя фигурными скобками с каждой стороны. Можно использовать вложенные шаблоны.

Рассмотрим простой пример шаблона:

<h1>{{header}}</h1>
<p>{{{content}}}</p>
<ul>
{{#authors}}
    <li>{{#accent}} {{.}} {{/accent}}</li>
{{/authors}}
{{^authors}}
    <li>anonymous</li>
{{/authors}}
</ul>

Данные, с которыми работает шаблон, называются контекстом. Имя тега указывает, к какому полю контекста необходимо обратиться. Пример данных, которые могут послужить контекстом для нашего шаблона:

var data = {
    header : "Новый пост",
    content: "Первая строка<br />Вторая строка",
    authors: ["alex", "daemon", "john"],
    accent : function () {
        return function (text, render) {
            text = render(text);
            return '<strong>' + text + '</strong>';
        }
    }
};

Чтобы «запустить» шаблонизатор и отрисовать с помощью шаблона данные, необходимо подключить библиотеку:

<script type="text/javascript" src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>

И вызывать рендеринг методом render():

Mustache.render(template, data);

Здесь первым параметром передается шаблон, а вторым — данные. Так же можно использовать третий параметр — список дополнительных шаблонов, и четвертый — функцию callback, которая вызывается после обработки шаблона.

Более подробно о тегах

Всего в Mustache четыре основных типа тегов: переменная, секция, комментарий и подключение дополнительного шаблона.

Переменная выводит данные с экранированием HTML-сущностей {{header}} и без экранирования {{{content}}}. Отличаются они количеством скобок. В нашем случае, вместо {{header}} подставится строчка «Новый пост».

Секция представляет собой парный тег. Принцип ее действия зависит от типа данных, с которыми она работает:

true/false — ведет себя как оператор if: отображает блок только в случае, когда было передано true
список значений — аналог цикла с подставкой значений; элемент списка подставляется вместо тега-точки
функция — получает два значения: текст блока и рендер-метод, и заменяет блок своим результатом

Так, например, секция

{{#authors}}<li>{{.}}</li>{{/authors}}

превратится в

<li>alex</li>
<li>daemon</li>
<li>john</li>

Если список пуст, то обрабатывается содержимое «тега с крышечкой», в нашем случае — это {{^authors}} … {{/authors}}.

Комментарий оформляется в виде тега с восклицательным знаком, например, {{! comment content}}.

Подключение дополнительного шаблона вызывается с помощью тега с угловой скобкой. Например, {{>copyright}}. Если в текущем контексте присутствует поле с таким названием, то оно будет передано в качестве контекста для подключаемого шаблона.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">

var template = '<h1>{{header}}</h1>' +
               '<p>{{{content}}}</p>' +
               '{{#authors}}<li>{{#accent}} {{.}} {{/accent}}</li>{{/authors}}' +
               '{{^authors}}<li>anonymous</li>{{/authors}}</ul>';
var data = {
    header : "Новый пост",
    content: "Первая строка<br />Вторая строка",
    authors: ["alex", "daemon", "john"],
    accent : function () {
        return function (text, render) {
            text = render(text);
            return '<strong>' + text + '</strong>';
        }
    }
};
function loadpage() {
    var html = Mustache.render(template, data);
    document.getElementById('output').innerHTML = html;
}

</script>
</head>
<body onload="loadpage()">
<div id="output"></div>
</body>
</html>

Поиск: HTML • JavaScript • Web-разработка • Шаблон сайта • Шаблонизатор