Простой и компактный, с отличной производительностью, шаблонный движок на JavaScript, использует нативный синтаксис JavaScript, сжатая версия менее 1 кБ

Пример

http://qinshenxue.oschina.io/tpl/

Синтаксис

Данные шаблона и вспомогательные методы

Данные, передаваемые в шаблон, имеют имя параметра $data Вспомогательные методы (как описано в разделе API) вызываются через $tools

Вывод значений свойств

<div> {{= $data.propName }} </div>
<div> {{= Math.random() }} </div>
<div> {{= $tools.formatDate($data.date) }} </div>

Нативный синтаксис JavaScript

{{ if( $data.really){ }}
<div>do sth...</div>
{{ } else { }}
<div>do sth...</div>
{{ } }}

{{ var list=$data.list; }}
{{ for(var i=0,j=list.length;i<j;i++){ }}
    <div>{{= list[i] }}</div>
{{ } }}

API

tpl(tplId, data)

• tplId идентификатор контейнера, содержащего шаблон
• data данные для рендеринга шаблона Возвращает результат рендеринга

document.getElementById('output').innerHTML = tpl('tpl-example', {list: [1, 2, 3]});

tpl.compile(source[, cacheId])

• source шаблон для компиляции
• [необязательно] cacheId идентификатор кэша Возвращает функцию рендеринга

var render = tpl.compile('{{=$data.prop}}');
render({prop: 'hello world'});

tpl.render(tplId, data)

То же, что и tpl(tplId, data)

tpl.tool(toolName, toolFunction) Добавление вспомогательных методов, которые можно вызвать в шаблоне

• toolName имя вспомогательного метода
• toolFunction вспомогательный метод

tpl.tool('formatDate', function (date) {
        var d = new Date(date);
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
    });

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

<div> {{= $tools.formatDate($data.date) }} </div>