Mustache шаблонизатор

Posted on by

Mustache – простой шаблонизатор с минимумом логики, но набирающий все большую популярность и добавляющий в свои ряды новые языки, которые его поддерживают(Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, node.js.)

Я приведу пример как можно использовать Mustache вместе с JavaScript.

Для старта нам необходимо выкачать Mustache, и создать себе html-файл для экспериментов, в который подключить библиотеку.

Разберем пример с офсайта. Структура данных:

var  data = {
        "header": "Colors",
        "items": [
            {"name": "red", "first": true, "url": "#Red"},
            {"name": "green", "link": true, "url": "#Green"},
            {"name": "blue", "link": true, "url": "#Blue"}
        ],
        "empty": false
    };

(добавим его в javascript тег к нашей html страничке)

и сам шаблон Mustache:

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

Для простоты первого примера поместим весь этот шаблон в строковую переменную template.

осталось применить метод Mustache.to_html():

console.log(Mustache.to_html(template, data));

Вот тут можно поиграть с исходным кодом.

Расширим этот вариант и сделаем его полным аналогом офсайта: т.е. чтобы можно было подавать данные и шаблон через textarea, вот так.

С песочницей разобрались, переходим рассмотрению самой библиотеки. Мы уже опробовали основной метод Mustache.to_html, который имеет следующий синтаксис:

to_html(template, data, partials, send)

Но! Этот метод, как оказалось, уже является deprecated и вместо него стоит использовать render():

render(template, data, partials)
template - шаблон (string)
data - данные подставляемые в шаблон (object)
partials - массив подшаблонов, также динамически собираемых

Остальные методы, которые не так реже используются это:

clearCache() - для очистки кеша
compile(template, tags) - компилирует шаблон в выполняемую функцию
compilePartial(name, template, tags) - тоже для подшаблонов

Как видим: методов у mustache.js совсем не много. Поэтому продолжим разбирать структуру шаблонов.

Возможны следующие встраивания в html:

переменная(variable)

{{variable}} – экранированный вывод переменной

{{{variable}}} – не экранированный вывод переменной

{{variable.property}} – обращение к свойству объекта

СекЦИЯ(SECtion)

Секция представляет из себя блок заключенные между тегами {{#sectionname}} и {{/sectionname}}

Поведение секции зависит от переданного в нее значения:

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

подшаблон(partial)

имеют синтаксис {{> partialname}} и подставляют не переменную, а целый шаблон.

комментарий(comment)

{{! comment}} – вывод комментария

 

Более подробно можно почитать:

Относительно субъективные сравнительные тесты с другими шаблонизаторами можно посмотреть тут.