В этой статье я расскажу про механизм шаблонизации, который используется в JS-фреймворке Mohawk.
Как и в серверных скриптах, основной задачей шаблонизатора — является отделение кода от представления (напр. HTML разметки), так и в ява скриптах он играет подобную роль. Ну, а также становится удобнее писать код.
Код шаблонизатора в Мохавке располагается в файле kernel/Template.js и подключается фреймворком по умолчанию. Сам шаблонизатор представляет собой объект Template, у которого мы будем использовать два метода:
— void Template.assign(String name, mixed value)
— String Template.transform(String template)
Как можно догадаться из описания, первый метод присваивает переменные шаблонизатору, принимая в качестве аргументов: имя переменной и ее значение. При этом значение может быть любым: число, строка, объект и т.д. Второй же метод непосредственно трансформирует шаблон и возвращает результат трансформации.
Далее в примерах я опишу очень простой, но при этом удобный шаблонный язык. Для удобства задания шаблонов я использую встроенную функцию includeTemplate(name), которая загружает файл из папки с шаблонами с именем name.tmpl и присваивает содержимое шаблона в переменную NAME.
Итак, вывод заданной переменной осуществляется через конструкцию {%name}, где name — имя переменной.
Пример:
Попробуем представить конкретный пример: нам нужно вывести количество писем в почтовом ящике пользователя.
Наш шаблон: var.tmpl
Яваскрипт:
Результат (значение переменной str):
Вывод по условию выполняется через конструкцию {%if условие}...{%end}
Пример (cond.tmpl):
Яваскрипт (мы уже присвоили значение переменной num, поэтому здесь мы просто продолжим):
Результат будет аналогичен предыдущему примеру, т.к. num = 5 > 0:
Допустим, что в ящике нет писем. Тогда нам нужно два варианта шаблона, которые мы будем использовать при наличии писем и их отсутствии. Для этого воспользуемся конструкцией {%if условие}...{%else}...{%end}
Пример (contra.tmpl):
Яваскрипт (изменим значение переменной num на ноль):
Результат:
Идем дальше. Нам нужно вывести содержимое почтового ящика. Пусть, содержимое в итоге будет записано в массив emails. Для вывода массива в таблицу используем конструкцию цикла: {%for elem in array}...{%end} — где elem это элемент массива, а array — сам массив.
Сначала яваскрипт:
Теперь шаблон (loop.tmpl):
И, наконец, результат:
Допустим, нам нужно вывести адресную книгу. Пусть книга записана в переменной book, которая представляет собой ассоциативный массив (хеш) со структурой: ключ (имя человека) — значение (эл. почта). Для итерации массива не только по элементам, но и по ключам, используем конструкцию: {%for elem in array => key}...{%end}.
Пример:
Шаблон (loop2.tmpl):
Результат:
Ну, и напоследок. Допустим, при выводе эл. почты в адресной книге мы хотим автоматом превратить ее в ссылку. Для того, чтобы модифицировать переменную используется конструкция: {%name|function} — т.е. функция function будет применена к переменной name.
Последний пример:
Шаблон (mod.tmpl):
Результат:
Шаблонизатор позволяет организовать код проекта, а также повысить скорость разработки.
Скачать Мохавк можно здесь: irokez.org/download/mohawk
А вводная статья про фреймворк была тут: habrahabr.ru/blogs/irokez_cms/53778
Зачем нужна шаблонизация?
Как и в серверных скриптах, основной задачей шаблонизатора — является отделение кода от представления (напр. 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