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

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

<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> 

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

Mustache.to_html(template, data);

Здесь первым параметром передается шаблон, а вторым — данные. Так же можно использовать третий параметр —список дополнительных шаблонов, и четвертый — функцию 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/. Если у читателей возникли какие-то вопросы, я с удовольствием на них отвечу.