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

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

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

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

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

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

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

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

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

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

Секция представляет собой парный тег. Принцип ее действия зависит от типа данных, с которыми она работает. Если в контексте имени секции соответствует поле со списком, то шаблонизатор проходит по его элементам и текст внутри парного тега обрабатывается по одному разу для каждого элемента списка. Элемент списка подставляется заместо тега-точки. Так, например, секция {{#authors}}<li>{{.}}</li>{{/authors}} превратится в <li>alex</li><li>daemon</li><li>john</li>. Если список пуст, то обрабатывается содержимое «тега с крышечкой», в нашем случае — это{{^authors}} … {{/authors}}.

Если имени секции соответствует функция, то для подстановки будет использован результат ее выполнения.

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

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

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

Производительность

Вопросы производительности Javascript шаблонизаторов рассматриваются в этой статье. Автор провел тестирование восьми шаблонизаторов и выяснил, что на простых шаблонах Mustache показывается лучшую производительность.

Пример работы

Демо

Сайт проекта: http://mustache.github.com/. Если у читателей возникли какие-то вопросы, я с удовольствием на них отвечу.

  Источник: Mustache — шаблонизатор для JavaScript | JavaScript | Временно.нет.
Mustache — шаблонизатор для JavaScript
Метки: