В этой статье я расскажу про механизм шаблонизации, который используется в JS-фреймворке Mohawk.

Зачем нужна шаблонизация?

Как и в серверных скриптах, основной задачей шаблонизатора — является отделение кода от представления (напр. HTML разметки), так и в ява скриптах он играет подобную роль. Ну, а также становится удобнее писать код.

Шаблонизатор — Template

Код шаблонизатора в Мохавке располагается в файле kernel/Template.js и подключается фреймворком по умолчанию. Сам шаблонизатор представляет собой объект Template, у которого мы будем использовать два метода:
— void Template.assign(String name, mixed value)
— String Template.transform(String template)

Как можно догадаться из описания, первый метод присваивает переменные шаблонизатору, принимая в качестве аргументов: имя переменной и ее значение. При этом значение может быть любым: число, строка, объект и т.д. Второй же метод непосредственно трансформирует шаблон и возвращает результат трансформации.

Далее в примерах я опишу очень простой, но при этом удобный шаблонный язык. Для удобства задания шаблонов я использую встроенную функцию includeTemplate(name), которая загружает файл из папки с шаблонами с именем name.tmpl и присваивает содержимое шаблона в переменную NAME.

Вывод переменных

Итак, вывод заданной переменной осуществляется через конструкцию {%name}, где name — имя переменной.
Пример:

Template.assign('foo', 'bar'); // присваиваем переменной foo значение bar var str = Template.transform('foo is {%foo}'); // str = 'foo is bar' * This source code was highlighted with Source Code Highlighter.

Попробуем представить конкретный пример: нам нужно вывести количество писем в почтовом ящике пользователя.
Наш шаблон: var.tmpl

<p>You have <strong>{%num}</strong> emails</p> * This source code was highlighted with Source Code Highlighter.

Яваскрипт:

includeTemplate('var'); Template.assign('num', 5); var str = Template.transform(VAR); * This source code was highlighted with Source Code Highlighter.

Результат (значение переменной str):

<p>You have <strong>5</strong> emails</p> * This source code was highlighted with Source Code Highlighter.

Условие

Вывод по условию выполняется через конструкцию {%if условие}...{%end}

Пример (cond.tmpl):

{%if num > 0} <p>You have <strong>{%num}</strong> emails</p> {%end} * This source code was highlighted with Source Code Highlighter.

Яваскрипт (мы уже присвоили значение переменной num, поэтому здесь мы просто продолжим):

includeTemplate('cond'); str = Template.transform(COND); * This source code was highlighted with Source Code Highlighter.

Результат будет аналогичен предыдущему примеру, т.к. num = 5 > 0:

<p>You have <strong>5</strong> emails</p> * This source code was highlighted with Source Code Highlighter.

Допустим, что в ящике нет писем. Тогда нам нужно два варианта шаблона, которые мы будем использовать при наличии писем и их отсутствии. Для этого воспользуемся конструкцией {%if условие}...{%else}...{%end}

Пример (contra.tmpl):

{%if num > 0} <p>You have <strong>{%num}</strong> emails</p> {%else} <p>Your mailbox is empty :(</p> {%end} * This source code was highlighted with Source Code Highlighter.

Яваскрипт (изменим значение переменной num на ноль):

includeTemplate('contra'); Template.assign('num', 0); str = Template.transform(CONTRA); * This source code was highlighted with Source Code Highlighter.

Результат:

<p>Your mailbox is empty :(</p> * This source code was highlighted with Source Code Highlighter.

Циклы

Идем дальше. Нам нужно вывести содержимое почтового ящика. Пусть, содержимое в итоге будет записано в массив emails. Для вывода массива в таблицу используем конструкцию цикла: {%for elem in array}...{%end} — где elem это элемент массива, а array — сам массив.

Сначала яваскрипт:

var emails = [ {'from': 'boss@example.com', 'subject': 'When will you finish the project??'}, {'from': 'me@example.com', 'subject': 'Reminder: finish the project'}, {'from': 'spam@example.com', 'subject': 'You have WON 1000000 dollars!'} ]; Template.assign('emails', emails); includeTemplate('loop'); str = Template.transform(LOOP); * This source code was highlighted with Source Code Highlighter.

Теперь шаблон (loop.tmpl):

{%if emails.length > 0} <p>You have <strong>{%num}</strong> emails</p> <table> <thead> <tr> <th>From</th> <th>Subject</th> </tr> </thead> <tbody> {%for email in emails} <tr> <td>{%email.from}</td> <td>{%email.subject}</td> </tr> {%end} </tbody> </table> {%else} Your mailbox is empty :( {%end} * This source code was highlighted with Source Code Highlighter.

И, наконец, результат:

<p>You have <strong>0</strong> emails</p> <table> <thead> <tr> <th>From</th> <th>Subject</th> </tr> </thead> <tbody> <tr> <td>boss@example.com</td> <td>When will you finish the project??</td> </tr> <tr> <td>me@example.com</td> <td>Reminder: finish the project</td> </tr> <tr> <td>spam@example.com</td> <td>You have WON 1000000 dollars!</td> </tr> </tbody> </table> * This source code was highlighted with Source Code Highlighter.

Допустим, нам нужно вывести адресную книгу. Пусть книга записана в переменной book, которая представляет собой ассоциативный массив (хеш) со структурой: ключ (имя человека) — значение (эл. почта). Для итерации массива не только по элементам, но и по ключам, используем конструкцию: {%for elem in array => key}...{%end}.

Пример:

var book = { 'Alice': 'alice@example.com', 'Bob': 'bob@example.com', 'Carol': 'carol@example.com' }; Template.assign('book', book); includeTemplate('loop2'); str1 = Template.transform(LOOP2); * This source code was highlighted with Source Code Highlighter.

Шаблон (loop2.tmpl):

<table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> {%for email in book => name} <tr> <td>{%name}</td> <td>{%email}</td> </tr> {%end} </tbody> </table> * This source code was highlighted with Source Code Highlighter.

Результат:

<table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>alice@example.com</td> </tr> <tr> <td>Bob</td> <td>bob@example.com</td> </tr> <tr> <td>Carol</td> <td>carol@example.com</td> </tr> </tbody> </table> * This source code was highlighted with Source Code Highlighter.

Модификаторы переменных

Ну, и напоследок. Допустим, при выводе эл. почты в адресной книге мы хотим автоматом превратить ее в ссылку. Для того, чтобы модифицировать переменную используется конструкция: {%name|function} — т.е. функция function будет применена к переменной name.

Последний пример:

var linkify = function (email) { return '<a href="mailto' + email + '">' + email + '</a>'; } includeTemplate('mod'); str = Template.transform(MOD); * This source code was highlighted with Source Code Highlighter.

Шаблон (mod.tmpl):

<table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> {%for email in book => name} <tr> <td>{%name}</td> <td>{%email|linkify}</td> </tr> {%end} </tbody> </table> * This source code was highlighted with Source Code Highlighter.

Результат:

<table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td><a href="mailtoalice@example.com">alice@example.com</a></td> </tr> <tr> <td>Bob</td> <td><a href="mailtobob@example.com">bob@example.com</a></td> </tr> <tr> <td>Carol</td> <td><a href="mailtocarol@example.com">carol@example.com</a></td> </tr> </tbody> </table> * This source code was highlighted with Source Code Highlighter.

В заключение

Шаблонизатор позволяет организовать код проекта, а также повысить скорость разработки.
Скачать Мохавк можно здесь: irokez.org/download/mohawk
А вводная статья про фреймворк была тут: habrahabr.ru/blogs/irokez_cms/53778

Mohawk / Шаблонизация