Javascript-шаблонизатор (client-side)

Question

[gigigi]

Здравствуйте.
Начинаю новый проект и сразу стал задумываться о javascript-шаблонизаторе, т.к. html внутри js не есть хорошо и не очень удобно.

От шаблонизатора хочется простоты и функциональности. В идеале я вижу это так: указываем файл темплейта, передаём массив (или объект/json/etc), оно там рендрится и возвращается в виде html.
Почти то, что мне нужно я нашёл в шаблонизаторе Just, вот пример:

var just = new JUST({ root : 'path_to_teplates/' });
just.render('template_name', { aaa: bbb, ccc: ddd }, function(error, html) {
	$('#superblock').html(html);
});

Вроде всё хорошо — и отладка удобная и просто и удобно, но вот часть именно шаблона расстраивает. Синтаксис громоздкий (по сути это и есть JS) и странный.

<% for (var i = 0; i < articles.length; i++) { %>
<% this.partial('article', { article: articles[i] }); %>
<% } %>

Сам Just почти ничего не умеет, кроме как исполнять JS.

Смотрел несколько движков, но так и не нашёл того, что мне нужно и было бы удобно. Возможно кто-то из вас сможет помочь? :)
Сразу скажу, что не хотелось бы через одно место подключать nodejs-шаблонизаторы (через всякие browserify).
Заранее спасибо.

Answer 1

[AGvin]

Советую ознакомиться с handlebars

Comments

[gigigi]

Спасибо, тоже интересный шаблонизатор. Посмотрю его.

[gigigi]

А не подскажите, возможно ли в качестве source использовать не html-код а файл шаблона? Не совсем понимаю зачем шаблон сохранять в JS и потом его рендерить там же :)

[AGvin]

На сколько помню — нет, но Вы можете стандартными средствами, практически, любого JS-фреймворка отсылать AJAX-запросы на подтяжку шаблона, и ложить его в кеш браузера.

[gigigi]

Да, спасибо, я пошёл пока более простым способом. Прямо в темплейт помещаю то что нужно рендрить, а в JS'е уже беру это через $('#block').html();
Просто изначально мыслил как-то немного подругому :)

Answer 2

[1nd1go]

Использую $.nano (по-моему я его немного подкрутил):

            $.nano = function(template, data) {
                return template.replace(/\{([\w\.]*)\}/g, function (str, key) {
                    var keys = key.split("."), value = data[keys.shift()];
                    $.each(keys, function () { value = value[this]; });
                    return (value === null || value === undefined) ? "" : ($.isArray(value) ? value.join('') : value);
                });
            };

    <script id="results-tmpl" type="text/html">
            <p>Correct: {correct}</p>
            <p>Wrong: {wrong}</p>
        </div>
    </script>

$("#container").html($.nano($("#results-tmpl"), {correct : "1"}));

Comments

[gigigi]

Спасибо :) но вариант выше показался более подходящим.

[ZaxapKramer]

А не подскажете, как его применять для работы с массивами? Все не могу понять. И в нем по-умолчанию есть условия?

Answer 3

[Finom]

Полгода использую EJS, доволен как слон.

Answer 4

[Константин Китманов]

В последнем проекте использовал swig, очень счастлив. Похоже на Twig/Django/Jinja. Много умеер из коробки (наследование, макросы, фильтры), легко расширяется.

Comments

[Сергей Протько]

Сразу скажу, что не хотелось бы через одно место подключать nodejs-шаблонизаторы (через всякие browserify).

Да и громоздка эта библиотека. Под Node.js хорошо, но не для браузера.

[gigigi]

Спасибо :) на первый взгляд похоже на то, что нужно. Щас попробуем :)

[Константин Китманов]

Не нужно там ничего подключать через одно место. Один раз собирается и потом подключается, как любая другая библиотека.
Громоздкости не заметил, в API два метода — init и render. Если это громоздко, то сдаюсь.

[gigigi]

Это не я про громоздкость писал :) как собирать под браузер нашёл, всё просто.

[Константин Китманов]

Единственное, у меня он используется в вот такой обертке.

[gigigi]

Спасибо, её тоже посмотрю :)

Answer 5

[uzzz]

Мы на проекте используем mustache + handlebars. Нареканий нет. Из плюсов — есть реализации для кучи ЯП, поэтому можно на сервере и клиенте использовать одни и те же шаблоны.

Answer 6

[Антон Медведев]

Также посмотрите Monkberry JavaScript DOM-based template engine.
Из такого шаблона:

<div>
  <h1>{{ title }}</h1>
  <p>
    {{ text }}
  </p>
</div>

Компилируется в JavaScript%

var div = document.createElement('div');
var h1 = document.createElement('h1');
var p = document.createElement('p');

div.appendChild(h1);
div.appendChild(p);

   ...

view.update = function (data) {
  h1.textContent = data.title;
  p.textContent = data.text;
};

Answer 7

[xmoonlight]

REX Tiny templater