Pull to refresh

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

Reading time 8 min
Views 931
В этой статье я расскажу про механизм шаблонизации, который используется в 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
Tags:
Hubs:
+1
Comments 2
Comments Comments 2

Articles