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

Здравствуйте.
Начинаю новый проект и сразу стал задумываться о 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).
Заранее спасибо.
  • Вопрос задан
  • 12400 просмотров
Решения вопроса 1
AGvin
@AGvin
Советую ознакомиться с handlebars
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
@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"}));
Ответ написан
k12th
@k12th
console.log(`You're pulling my leg, right?`);
В последнем проекте использовал swig, очень счастлив. Похоже на Twig/Django/Jinja. Много умеер из коробки (наследование, макросы, фильтры), легко расширяется.
Ответ написан
@uzzz
Мы на проекте используем mustache + handlebars. Нареканий нет. Из плюсов — есть реализации для кучи ЯП, поэтому можно на сервере и клиенте использовать одни и те же шаблоны.
Ответ написан
Также посмотрите 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;
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы