Шаблонные движки jQuery [закрыто]

Я ищу шаблонный движок для использования на стороне клиента. Я пробовал несколько таких как jsRepeater и jQuery Templates. Хотя они, кажется, работают нормально в FireFox, все они, кажется, ломаются в IE7, когда дело доходит до рендеринга таблиц HTML.

Я также взглянул на MicrosoftAjaxTemplates.js (с http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ), но оказалось, что та же проблема.

Какой совет по использованию других шаблонизаторов?

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

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

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

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

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

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

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

Спасибо за совет, Эвби.

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 UI Grid.

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 . Он имеет клиентское шаблонное решение, которое имеет знакомый синтаксис JSP / ASP, но предварительно компилируется во время сборки для компактных шаблонов с возможностью кэширования, которые не нужно анализировать во время выполнения. Он хорошо работает с jQuery и другими библиотеками JavaScript, так как сами шаблоны скомпилированы в чистый JavaScript.

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

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

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

Ох, и легкий синтаксис.

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

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

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

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

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

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

Dropbox, используя шаблонизатор Джона Ресига на сайте. Они немного изменили его, вы можете проверить в этом файле JS dropbox. Ищите в этом файле tmpl, и вы получите код механизма шаблонов.

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

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

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

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

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