Движки шаблонов jQuery
Я ищу шаблонный движок для использования на стороне клиента. Я пробовал несколько таких как jsRepeater и jQuery Templates. Хотя они, кажется, работают нормально в FireFox, все они, похоже, ломаются в IE7, когда дело доходит до рендеринга таблиц HTML.
Я также взглянул на MicrosoftAjaxTemplates.js (с http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766), но оказалось, что та же проблема.
Какой совет по использованию других шаблонизаторов?
19 ответов
Посмотрите почтовый клиент Рика Строля, работающий с jQuery. Он исследует jTemplates, но затем делает лучшее обоснование для решения для микро-шаблонов Джона Резига, даже немного улучшая его. Хорошие сравнения, много образцов.
Просто провел некоторое исследование по этому вопросу, и я буду использовать jquery-tmpl. Зачем?
- Это написано Джоном Резигом.
- Он будет поддерживаться основной командой jQuery как "официальный" плагин.РЕДАКТИРОВАТЬ: команда jQuery устарела этот плагин.
- Он обеспечивает идеальный баланс между простотой и функциональностью.
- У него очень чистый и продуманный синтаксис.
- HTML-кодирование по умолчанию.
- Это очень расширяемый.
Подробнее здесь: http://forum.jquery.com/topic/templating-syntax
jQote: http://aefxx.com/jquery-plugins/jqote/
Кто-то взял решение Resig для микро-шаблонов и упаковал его в плагин jQuery.
Я буду использовать это, пока Resig не выпустит свой собственный (если он выпустит свой собственный).
Спасибо за совет, Эвби.
Шаблонный движок
Основное использование
Предполагая, что у вас есть следующий ответ 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://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.
Это зависит от того, как вы определяете "лучший", пожалуйста, смотрите мой пост здесь по теме
Если вы ищите самый быстрый, вот хороший тест, кажется, что 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
А вот и последний источник
Другие источники
Хорошая презентация по теме http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates
Рабочие демонстрации: http://borismoore.github.com/jsviews/demos/index.html
Обратите внимание, что он все еще не в бета-версии, а только в виде дорожной карты, но кажется хорошим кандидатом на то, чтобы стать официальным расширением JQuery/JQueryUI для шаблонов и привязки пользовательского интерфейса.
http://garann.github.com/template-chooser/ эта ссылка действительно полезна для выбора базового шаблона Javascript.
Только чтобы быть глупым ^^
// 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');
Это не зависит от jsquery, но вот библиотека шаблонов на основе JS, выпущенная google как открытый исходный код:
http://code.google.com/p/google-jstemplate/
Это позволяет использовать элементы DOM в качестве шаблонов и является реентерабельным (так как выходные данные рендеринга шаблона по-прежнему являются шаблоном, который можно повторно визуализировать с использованием другой модели данных).
Другие указали jquery-tmpl, и я проголосовал за этот ответ. Но не забудьте взглянуть на вилки Github.
Есть важные исправления и интересные особенности. http://github.com/jquery/jquery-tmpl/network
Для очень легкой работы достаточно jquery-tmpl, но в некоторых случаях требуется, чтобы данные знали, как форматировать себя (плохо!).
Если вы ищете более полнофункциональный шаблонный плагин, я бы предложил Orange-J. Это было вдохновлено Freemarker. Он поддерживает, если, иначе, циклы над объектами и массивами, встроенный JavaScript, в том числе шаблоны в шаблонах и имеет отличные параметры форматирования для вывода (maxlen, wordboundary, htmlentities и т. Д.).
Ох, и легкий синтаксис.
Я использовал jtemplates jquery, но производительность была очень плохой. Я переключился на trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates), который имеет гораздо лучшую производительность. Я не заметил никаких проблем с IE7 или FF.
У Джона Резига есть тот, который он разместил в своем блоге. http://ejohn.org/blog/javascript-micro-templating/
Если вы работаете в.NET Framework 2.0/3.5, вам следует взглянуть на JBST, реализованный http://jsonfx.net/download/. Он имеет клиентское шаблонное решение, которое имеет знакомый синтаксис JSP/ASP, но предварительно компилируется во время сборки для компактных шаблонов с возможностью кэширования, которые не нужно анализировать во время выполнения. Он хорошо работает с jQuery и другими библиотеками JavaScript, так как сами шаблоны скомпилированы в чистый JavaScript.
Возможно, вы захотите немного подумать, как вы хотите создать свои шаблоны.
Одна из проблем, связанных со многими из перечисленных шаблонных решений (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 модных вещей.