Шаблонизаторы в Node: Mu

Итак, в написании блога настал момент когда просто выводить HTML стало недостаточно, и я стал искать шаблонизатор для сайта. Я выбрал Mu — порт Mustache из Ruby, насколько я понял. И хоть с Ruby работать мне не приходилось, синтаксис и набор фич понравился. Чёткое отделение логики от представления (в шаблоне вообще нет кода), вложенные шаблоны, компиляция в функции. В общем, решил изучить.

В качестве шаблона было решено взять один из WordPress’овских. После недолгих поисков выбор пал на Several от NET-TEC Internetmarketing. Портирование, к моему удивлению, заняло не так много времени.

Использование шаблонизатора

Установка шаблонизатора проходит без проблем. К сожалению npm-модуля пока нет, так что ставить придётся из репозитория. После установки создаём папку для наших шаблонов. Синтаксис шаблона выглядит примерно так:

<h1>{{header}}</h1>
  <ul>
  {{#items}}
      <li><strong>{{name}}</strong> [<a href="{{url}}">{{name}}</a>]</li>
  {{/items}}
  </ul>

К сожалению, я не нашёл подходящей подсветки в WordPress В любом случае, этот шаблон принимает объект следующего вида:

var data = {
	'header': 'Todo list',
	'items': [
		{'name':'Buy a calf', 'url':'http://ebay.com/'},
		{'name':'Raise cow', 'url':'http://www.calfnotes.com/'},
		{'name':'Sell milk', 'url':'http://ebay.com/'}
	]
};

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

<h1>Todo list</h1>
  <ul>
      <li><strong>Buy a calf</strong> [<a href="http://ebay.com/">Buy a calf</a>]</li>
      <li><strong>Raise cow</strong> [<a href="http://www.calfnotes.com/">Raise cow</a>]</li>
      <li><strong>Sell milk</strong> [<a href="http://ebay.com/">Sell milk</a>]</li>
  </ul>

Ещё одна полезная возможность: можно включать одни шаблоны внутрь других. Получившийся шаблон будет отрендерён как один файл. Вложенные шаблоны делаются конструкцией {{>header}}, где header — имя шаблона.

Рендеринг шаблона

Для того чтобы отрисовать шаблон, надо сохранить его в директорию шаблонов с расширением .mu. Вызов шаблонизатора будет выглядеть примерно так:

var Mu = require('./mu/mu');
var sys = require('sys');

Mu.templateRoot = './theme'; // здесь лежат шаблоны

var data = {
	'header': 'Todo list',
	'items': [
		{'name':'Buy a calf', 'url':'http://ebay.com/'},
		{'name':'Raise cow', 'url':'http://www.calfnotes.com/'},
		{'name':'Sell milk', 'url':'http://ebay.com/'}
	]
};

Mu.render('todo', data, {chunkSize: 10}, function (err, output) {

	if (err) {
		throw err;
	}	

	var buffer = '';

	output.on('data', function (c) {
		buffer += c;
	}).on('end', function () {
		sys.puts(buffer);
	});
});

Как видите, Mu рендерит шаблон постепенно. Для небольших страниц это скорее всего не будет заметно, и рендеринг будет происходить сразу. Но большие страницы можно рендерить потоком и, например, сразу отдавать клиенту. Это позволит здорово сэкономить память. Приведённый код предполагает, что шаблон сохранён в файл ./theme/todo.mu. При рендеринге и при включении в другие шаблоны имя шаблона указывается без расширения.

Настройка шаблонизатора

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

var mu = require('./mu/mu');
Mu.templateExtension = 'jstpl';

Уже в шаблоне можно сменить синтаксис разделителей — заменить двойные фигурные скобки чем то другим. Делается это так:

{{=<% %>=}}
<h1><%header%></h1>
  <ul>
  <%#items%>
      <li><strong><%name%></strong> [<a href="<%url%>"><%name%></a>]</li>
  <%/items%>
  </ul>

Так как логику в шаблон переносить нельзя, особые случаи вроде пустого списка придётся обрабатывать с помощью дополнительной переменной:

<h1>{{header}}</h1>
  {{#list}}
  <ul>
  {{#items}}
      <li><strong>{{name}}</strong> [<a href="{{url}}">{{name}}</a>]</li>
  {{/items}}
  </ul>
  {{/list}}
  {{#emptylist}}
  <p>The list is empty</p>
  {{/emptylist}}

Соответственным образом изменится и передаваемый объект:

var data = {
	'header': 'Todo list',
	'list': [
	    'items': [
			{'name':'Buy a calf', 'url':'http://ebay.com/'},
			{'name':'Raise cow', 'url':'http://www.calfnotes.com/'},
			{'name':'Sell milk', 'url':'http://ebay.com/'}
		]
	],
	'emptylist': false
};

Использование изменяемых элементов шаблона

Впрочем, способ управлять представлением всё таки есть. Элементам объекта можно передавать функции, которые будут выполнены шаблонизатором. Их значение будет использовано для подстановки, если соответствующий элемент шаблона — динамический (задан как {{#element}}). Функции могут обращаться к другим переменным шаблона:

var items = [
	{'name':'Buy a calf', 'url':'http://ebay.com/'},
	{'name':'Raise cow', 'url':'http://www.calfnotes.com/'},
	{'name':'Sell milk', 'url':'http://ebay.com/'}
];

var data = {
	'header': 'Todo list',
	'items': items,
	'list': function() {
		return this.item.length !== 0;
	},
	'emptylist': function() {
		return this.item.length === 0;
	}
};

Если в шаблонизатор будет передан непустой массив items, он будет выведен в виде списка. Если в массиве не будет элементов, будет выведено соответствующее сообщение. В этом случае элемент шаблона {{#list}} работает не как итератор, а как условие. Действие каждого такого оператора определяется типом данных, переданных в шаблонизатор с соответствующим именем. Если передана функция, используется тип возвращаемого ей значения. В нашем случае переданные в list и emptylist вернули boolean-значения, и соответствующие элементы шаблона сработали как условные операторы. Вот как действуют разные типы данных на динамический элемент шаблона:

• Функция: функция выполняется, полученное значение используется для определения действия
• Массив: элемент шаблона действует как итератор, перебирая значения массива
• Двоичная переменная: элемент шаблона действует как условный оператор
• Объект: элемент шаблона заменяется строковым представлением объекта
• Undefined: элемент шаблона заменяется пустой строкой

Ссылки по теме:

• Шаблонизатор Mu на Github