Главная

Swig — JavaScript шаблонизатор с Django Template синтаксисом

2013-03-25 в 16:10, admin, рубрики: Без рубрики

Заметил, что на Хабре никто не писал про отличный JavaScript шаблонизатор Swig.

JavaScript в поледнее время становится все более популярным и находит новые неожиданные сферы применения. Вот и меня не обошел этот тренд, так что при just-for-fun разработке одного проекта я не удержался и решил попробовать использовать JS одновременно на сервере (Node.JS), веб-клиенте (Backbone.js — все серьезно :) ) и в мобильном приложении (PhoneGap). Следующим шагом для меня стал выбор шаблонизатора, причем поддержка как node, так и браузера была обязательным критерием. До этого я имел дело в основном в Django Template Language, так что выбор пал на Swig.

Особенности Swig:

Django Template подобный синтаксис
Крайне высокая скорость работы (бенчмарки)
Поддержка node.js и основных браузеров
Совместимость с Express
Открытый исходный код

Node quickstart

Установка

npm install swig

Создание шаблона

<h1>{{ pagename|title }}</h1>
<ul>
  {% for author in authors %}
    <li{% if loop.first%} class="first"{% endif %}>
      {{ author }}
    </li>
  {% else %}
    <li>There are no authors.</li>
  {% endfor %}
</ul>

Рендеринг

var template  = require('swig');
var tmpl = template.compileFile('/path/to/template.html');
tmpl.render({
    pagename: 'awesome people',
    authors: ['Paul', 'Jim', 'Jane']
});

Результат

<h1>Awesome People</h1>
<ul>
  <li class="first">Paul</li>
  <li>Jim</li>
  <li>Jane</li>
</ul>

В браузере

Использование в Swig в браузере принципиально не отличается от использования в node, за исключением двух моментов:

Вместо swig.compileFile необходимо всегда использовать swig.compile
Для корректного использования extends, import и include следует указывать templateKey:
```
swig.compile(templateString, { filename: templateKey });
```

Подключаем

<script type='text/javascript" src="//path/to/swig/swig.js">

Подготавливаем шаблон

var template = swig.compile('<p>{% block content %}{% endblock %}</p>', { filename: 'main' });
var mypage = swig.compile('{% extends "main" %}{% block content %}Oh hey there!{% endblock %}', { filename: 'mypage' });

Рендерим