Шаблоны Mustache

Mus­tache — биб­лио­те­ка ми­ни­ма­ли­стич­ных шаб­ло­нов из­на­чаль­но ре­а­ли­зо­ван­ная для Ruby Кри­сом Ван­стра­сом (меж­ду про­чим CEO и один из ос­но­ва­те­лей GitHub). Ми­ни­ма­лизм Mus­tache вы­ра­жа­ет­ся в том, что там нет управ­ля­ю­щих кон­струк­ций вро­де if и else. Цик­лов там тоже нет, есть толь­ко теги. Неко­то­рые теги за­ме­ня­ют­ся про­сты­ми зна­че­ни­я­ми, неко­то­рые за­ме­ня­ют­ся се­ри­я­ми зна­че­ний, по­каз со­дер­жи­мо­го дру­гих за­ви­сит от опре­де­лен­ных усло­вий. Несмот­ря на весь ас­ке­тизм сво­е­го син­так­си­са, Mus­tache яв­ля­ет­ся мощ­ным и пол­но­цен­ным движ­ком шаб­ло­нов.

Вдох­но­ви­те­ля­ми Mus­tache по­слу­жи­ли ctem­plate и et.

Сей­час су­ще­ству­ют ре­а­ли­за­ции Mus­tache для огром­но­го ко­ли­че­ства язы­ков. Необ­хо­ди­мо учи­ты­вать что на раз­ных язы­ках ню­ан­сы ра­бо­ты бу­дут немно­го от­ли­чат­ся. Я сде­лаю об­зор без при­вяз­ки к кон­крет­но­му язы­ку, од­на­ко дан­ные для при­ме­ров буду пи­сать на JSON, т. к. ду­маю он всем по­ня­тен, и кро­ме все­го про­че­го ис­поль­зу­ет­ся в до­ку­мен­та­ции к Mus­tache.

Теги

Те­гом на­зы­ва­ет­ся неко­то­рая по­сле­до­ва­тель­ность сим­во­лов за­клю­чен­ная в двой­ные фи­гур­ные скоб­ки {{это_тег}}. Иден­ти­фи­ка­то­ром того, чем яв­ля­ет­ся кон­крет­ный тег яв­ля­ет­ся пер­вый сим­вол по­сле {{. Су­ще­ству­ет воз­мож­ность пе­ре­опре­де­лить от­кры­ва­ю­щую и за­кры­ва­ю­щую по­сле­до­ва­тель­ность сим­во­лов со ско­бок на что-ни­будь дру­гое.

Ком­мен­та­рии

По­сле­до­ва­тель­ность на­чи­на­ю­ща­я­ся с «!» счи­та­ет­ся ком­мен­та­ри­ем.

Шаб­лон:

Текст {{! комментарий}} шаблона

Ре­зуль­тат:

Текст  шаблона

Пе­ре­мен­ные

Са­мый про­стой тип тега. Встре­тив {{name}} Mus­tache отоб­ра­зит зна­че­ние пе­ре­мен­ной name из те­ку­ще­го кон­тек­ста. Зна­че­ния пе­ре­мен­ных отоб­ра­жа­ют­ся HTML-без­опас­ным об­ра­зом, т. е. все зна­чи­мые HTML сим­во­лы за­ме­ня­ют­ся на их ко­ди­ро­ван­ные эк­ви­ва­лен­ты. Для отоб­ра­же­ния HTML-строк без из­ме­не­ний ис­поль­зу­ют­ся теги {{{name}}} и .

Шаб­лон:

имя: {{name}}
возраст: {{age}}
организация: {{organisation}}
страница: {{{homepage}}}

Кон­текст:

{
  "name": "Билл Гейтс",
  "age": 55,
  "organisation": "Bill & Melinda Gates Foundation",
  "homepage": "<a href='http://www.gatesfoundation.org/'>Gates Foundation</a>"
}

Ре­зуль­тат:

имя: Билл Гейтс
возраст: 55
организация: Bill & Melinda Gates Foundation
страница: <a href='http://www.gatesfoundation.org/'>Gates Foundation</a>

Сек­ции

Сек­ци­ей на­зы­ва­ет­ся блок, от­кры­ва­ю­щий­ся те­гом {{#на­зва­ние_сек­ции}} и за­кры­ва­ю­щий­ся те­гом {{/на­зва­ние_сек­ции}}. Отоб­ра­же­ние со­дер­жи­мо­го сек­ции за­ви­сит от того, ка­кой тип и зна­че­ние име­ет пе­ре­мен­ная с име­нем «на­зва­ние_сек­ции».

По­каз сек­ции в за­ви­си­мо­сти от усло­вий

Сек­ция отоб­ра­жа­ет­ся, если со­от­вет­ству­ю­щая её пе­ре­мен­ная име­ет бу­ле­вый тип и её зна­че­ние рав­но True, либо эта пе­ре­мен­ная яв­ля­ет­ся непу­стым спис­ком.

Ин­вер­ти­ро­ван­ной сек­ци­ей на­зы­ва­ет­ся сек­ция от­кры­ва­ю­ща­я­ся те­гом {{^на­зва­ние_сек­ции}}. Она име­ет ин­верс­ные пра­ви­ла отоб­ра­же­ния. Со­дер­жи­мое отоб­ра­жа­ет­ся ко­гда пе­ре­мен­ная име­ет бу­ле­вый тип и зна­че­ние False, либо ко­гда пе­ре­мен­ная яв­ля­ет­ся пу­стым спис­ком.

Шаб­лон:

{{#isReg}}
    Добро пожаловать, {{name}}.
{{/isReg}}
{{^isReg}}
    Вам необходимо зарегистрироваться.
{{/isReg}}

{{^news}}
    Новостей на сегодня нет.
{{/news}}

Кон­текст:

{
  "isReg": True,
  "name": "Джон",
  "news": []
}

Ре­зуль­тат:

Добро пожаловать, Джон.

Новостей на сегодня нет.

Спис­ки

Если сек­ции со­от­вет­ству­ет спи­сок, то сек­ция отоб­ра­жа­ет­ся для каж­до­го эле­мен­та это­го спис­ка. При этом кон­тек­стом для отоб­ра­же­ния со­дер­жи­мо­го сек­ции ста­но­вит­ся оче­ред­ной эле­мент.

Шаб­лон:

{{#heroes}}
* {{name}}
{{/heroes}}

Кон­текст:

{
    "heroes": [{"name": "Безымянный"}
              ,{"name": "Небо"}
              ,{"name": "Сломанный Меч"}
              ,{"name": "Летящий Снег"}]
}

Ре­зуль­тат:

* Безымянный
* Небо
* Сломанный Меч
* Летящий Снег

В неко­то­рых ре­а­ли­за­ци­ях (JavaScript на­при­мер), есть воз­мож­ность отоб­ра­зить спи­сок зна­че­ний ба­зо­вых ти­пов (строк, чи­сел), ука­зав в ка­че­стве име­ни пе­ре­мен­ной {{.}}.

Шаб­лон:

{{#stars}}
* {{.}}
{{/stars}}

Кон­текст:

{
    "stars": ["Сириус", "Вега", "Антарес"]
}

Ре­зуль­тат:

* Сириус
* Вега
* Антарес

Функ­ции

Сек­ции мо­жет со­от­вет­ство­вать функ­ция. В этом слу­чае со­дер­жи­мое сек­ции пе­ре­да­ет­ся в эту функ­цию, по­сле чего отоб­ра­жа­ет­ся ре­зуль­тат её ра­бо­ты.

Шаб­лон:

{{#toUpper}}Привет!{{/toUpper}}

Кон­текст:

{
    "toUpper" : function () {
        return function(text) {
            return text.toUpperCase();
        }
    }
}

Ре­зуль­тат:

ПРИВЕТ!

Вклю­че­ние внеш­них фай­лов

Тег вида за­ме­ня­ет­ся со­дер­жи­мым фай­ла имя_фай­ла (или имя_фай­ла.mus­tache), к ко­то­ро­му при­ме­ня­ет­ся те­ку­щий кон­текст.

Из­ме­не­ние огра­ни­чи­те­лей те­гов

Мож­но из­ме­нить огра­ни­чи­те­ли те­гов с {{}} на дру­гую по­сле­до­ва­тель­ность сим­во­лов, не со­дер­жа­щую про­бе­лы и сим­вол «рав­но».

Шаб­лон:

* {{helloEn}}
{{=<< >>=}}
* << helloRu >>
<<={{ }}=>>
* {{ helloFr }}

Кон­текст:

{
    "helloEn": "hello",
    "helloRu": "привет",
    "helloFr": "bonjour"
}

Ре­зуль­тат:

* hello
* привет
* bonjour