Движки шаблонов jQuery

Ознакомьтесь с сообщением Рика Страла Клиентские шаблоны с помощью jQuery. Он исследует jTemplates, но затем приводит более убедительные доводы в пользу решения для микрошаблонов Джона Резига, даже улучшая его. Хорошее сравнение, много образцов.

Только что провел небольшое исследование и буду использовать jquery-tmpl. Почему?

1. Это написано Джоном Резигом.
2. Он будет поддерживаться основной командой jQuery как «официальный» плагин. EDIT: команда jQuery объявила этот плагин устаревшим.
3. Он обеспечивает идеальный баланс между простотой и функциональностью.
4. Он имеет очень чистый и хорошо продуманный синтаксис.
5. Он HTML-кодирует по умолчанию.
6. Он очень расширяемый.

Подробнее здесь: http://forum.jquery.com/topic/templating-syntax

jQote: http://aefxx.com/jquery-plugins/jqote/

Кто-то взял решение Resig для создания микрошаблонов и упаковал его в плагин jQuery.

Я буду использовать это, пока Resig не выпустит свой собственный (если он выпустит свой собственный).

Спасибо за подсказку, ewbi.

jQuery Nano:

Механизм шаблонов

Основное использование

Предполагая, что у вас есть следующий ответ JSON:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

ты можешь сделать:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

и вы получаете готовую строку:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

Тестовая страница...

jQuery-tmpl будет в ядре jQuery, начиная с jQuery 1.5:

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

Официальная документация находится здесь:

http://api.jquery.com/category/plugins/templates/

РЕДАКТИРОВАТЬ: он был исключен из jQuery 1.5 и теперь будет координироваться командой пользовательского интерфейса jQuery, поскольку он будет зависеть от предстоящей сетки пользовательского интерфейса jQuery.

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

Не уверен, как он решает вашу конкретную проблему, но есть также механизм шаблонов PURE.

Это зависит от того, как вы определяете «лучший», см. мой пост здесь по теме

Если вы ищете самый быстрый, вот хороший тест, кажется, что DoT побеждает и оставляет всех позади

Если вы ищете самый официальный подключаемый модуль JQuery, вот что я нашел

Часть I. Шаблоны JQuery

Бета-версия, временно-официальный плагин шаблона JQuery был http://api.jquery.com/category/plugins/templates/

Но, видимо, не так давно было решено оставить его в бета-версии...

Примечание. Команда jQuery решила не использовать этот плагин после бета-тестирования. Он больше не разрабатывается и не поддерживается. Документы пока остаются здесь (для справки), пока не будет готов подходящий плагин для замены шаблона.

Часть II. Следующий шаг

новая дорожная карта, похоже, нацелена на новый набор плагинов, JSRender (независимо от DOM и даже механизма рендеринга шаблонов JQuery) и JSViews, которые имеют хорошую привязку данных и реализацию наблюдателя/наблюдаемого шаблона.

Вот сообщение в блоге по теме

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

А вот и последний источник

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

Другие источники

• Хорошая презентация на тему http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Рабочие демонстрации: http://borismoore.github.com/jsviews/demos/index.html.

Обратите внимание, что это еще даже не бета-версия, а только элемент дорожной карты, но кажется хорошим кандидатом на то, чтобы стать официальным расширением JQuery/JQueryUI для шаблонов и привязки пользовательского интерфейса.

Только чтобы быть глупым ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/;)

Это не специфично для jsquery, но вот библиотека шаблонов на основе JS, выпущенная Google с открытым исходным кодом:

http://code.google.com/p/google-jstemplate/

Это позволяет использовать элементы DOM в качестве шаблонов и является реентерабельным (поскольку выходные данные рендеринга шаблона по-прежнему являются шаблоном, который можно повторно визуализировать с другой моделью данных).

Другие указали jquery-tmpl, и я проголосовал за этот ответ. Но не забудьте взглянуть на форки github.

Там есть важные исправления и интересные функции. http://github.com/jquery/jquery-tmpl/network

У Джона Резига есть один, который он разместил в своем блоге. http://ejohn.org/blog/javascript-micro-templating/

Если вы работаете в .NET Framework 2.0/3.5, вам следует взглянуть на JBST, реализованный на http://jsonfx.net/download/#ajax. Он имеет решение для создания шаблонов на стороне клиента, которое имеет знакомый синтаксис JSP/ASP, но предварительно компилируется во время сборки для компактных шаблонов с возможностью кэширования, которые не нужно анализировать во время выполнения. Он хорошо работает с jQuery и другими библиотеками JavaScript, поскольку сами шаблоны скомпилированы в чистый JavaScript.

Я использовал плагин jtemplates jquery, но производительность была очень плохой. Я переключился на trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates), который имеет гораздо лучшую производительность. Я не заметил никаких проблем с IE7 или FF.

Для очень легкой работы подходит jquery-tmpl, но в некоторых случаях требуется, чтобы данные знали, как форматировать себя (плохо!).

Если вам нужен более полнофункциональный плагин для создания шаблонов, я бы посоветовал Orange-J. Он был вдохновлен Freemarker. Он поддерживает if, else, циклы по объектам и массивам, встроенный javascript, включая шаблоны в шаблонах, и имеет отличные параметры форматирования для вывода (maxlen, wordboundary, htmlentities и т. д.).

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

Одна из проблем со многими из перечисленных шаблонных решений (jQote, jquery-tmpl, jTemplates) заключается в том, что они требуют, чтобы вы вставляли не-HTML в свой HTML, что может быть проблемой для работы с инструментами HTML или в процессе разработки с дизайнерами HTML. . Лично мне такой подход не нравится, хотя у него есть свои плюсы и минусы.

Существует еще один класс шаблонных подходов, которые используют обычный HTML, но позволяют указывать привязки данных с атрибутами элементов, классами CSS или внешними сопоставлениями.

Knockout – хороший пример такого подхода, но я сам им не пользовался, поэтому отказываюсь от него. голосов, чтобы решить, нравится это другим или нет. По крайней мере, пока у меня не будет времени поиграть с ним побольше.

PURE, указанный в качестве другого ответа, является еще одним примером такого подхода.

Для справки вы также можете посмотреть chain.js, но это не так. похоже, он был значительно обновлен с момента его первоначального выпуска. Дополнительную информацию об этом см. на http://javascriptly.com/2008/08/a-better-javascript-template-engine/.

Dropbox с использованием движок шаблонов Джона Резига на веб-сайте. Они немного изменили его, вы можете проверить этот js-файл из дропбокса. Найдите в этом файле tmpl, и вы получите код шаблонизатора.

В настоящее время я использую структуру с несколькими шаблонами HTML. Этот фреймворк значительно упрощает импорт шаблонных данных в DOM. Также отличное моделирование MVC.

http://www.enfusion-framework.org/ (посмотрите на примеры!)

Существует также переписанная версия PURE от beebole — jquery pure html templates — https://github.com/mpapis/jquery-pure-templates

Это должно позволять гораздо больше автоматического рендеринга, в основном с использованием селекторов jquery, что более важно, не требует добавления причудливых вещей в HTML.