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

Не знаю, как он справляется с вашей конкретной проблемой, но есть также механизм шаблонов ЧИСТЫЙ.

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

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

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

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

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

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

jQuery Nano:

Template Engine

Basic Usage

Assuming you have following JSON response:

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

you can make:

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

and you get ready string:

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

Test page...

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

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

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

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

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

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

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

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

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

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

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 UI, поскольку он будет зависеть от предстоящей jQuery UI Grid.

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

Также есть переписанный PURE by beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

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

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

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

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

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

ЧИСТЫЙ, указанный в качестве другого ответа, является еще одним примером этого подхода.

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

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

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

О, и простой синтаксис.

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

// 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/;)

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

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

Если вы ищете самый популярный плагин JQuery официальный, вот что я узнал

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

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

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

Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready.

Часть 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 для шаблонов и привязки пользовательского интерфейса.

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

Спасибо. Надеюсь, это будет кому-то полезно.

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

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