Я ищу механизм шаблонов для использования на стороне клиента. Я пробовал несколько, как jsRepeater и jQuery шаблоны. Хотя они, похоже, работают нормально в FireFox, все они, похоже, ломаются в IE7, когда дело доходит до рендеринга HTML-таблиц.
Я также рассмотрел MicrosoftAjaxTemplates.js(от http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766), но оказывается, что имеет ту же проблему.
Любые рекомендации по использованию других шаблонных двигателей?
Отправляйте сообщение Rick Strahl Клиентский шаблон с jQuery. Он исследует jTemplates, но затем делает лучший пример для решения для решения проблем с использованием шаблонов John Resig , даже улучшая его. Хорошие сравнения, множество образцов.
Просто сделал некоторые исследования по этому вопросу, и я буду использовать jquery-tmpl. Почему?
Подробнее здесь: http://forum.jquery.com/topic/templating-syntax
jQote: http://aefxx.com/jquery-plugins/jqote/
Кто-то взял решение для микротемперации Resig и упаковал его в плагин jQuery.
Я буду использовать это, пока Resig не выпустит свой собственный (если он выпустит свой собственный).
Спасибо за подсказку, ewbi.
Шаблон Engine
Основное использование
Предполагая, что у вас есть ответ 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/
EDIT: он был исключен из jQuery 1.5 и теперь будет координироваться командой jQuery UI, так как это будет зависимость предстоящей сетки пользовательского интерфейса 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
И вот последний источник
Другие ресурсы
Хорошая презентация по теме 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
У Джона Ресига есть тот, который он опубликовал в своем блоге. http://ejohn.org/blog/javascript-micro-templating/
Если вы работаете в .NET Framework 2.0/3.5, вы должны взглянуть на JBST, как реализовано http://JsonFx.net, Он имеет клиентское решение для шаблонов, которое имеет знакомый синтаксис JSP/ASP, но предварительно скомпилирован во время сборки для компактных кэшируемых шаблонов, которые не нужно анализировать во время выполнения. Он хорошо работает с jQuery и другими библиотеками JavaScript, поскольку сами шаблоны скомпилированы в чистый JavaScript.
Я использовал jtemplates jquery pluging, но производительность была очень плохой. Я переключился на trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates), который имеет гораздо лучшую производительность. Я не заметил никаких проблем с IE7 или FF.
Для очень легкой работы jquery-tmpl достаточно, но в некоторых случаях требуется, чтобы данные знали, как отформатировать себя (плохая вещь!).
Если вы ищете более полнофункциональный плагин для шаблонов, я бы предложил Orange-J. Это вдохновило Фримаркера. Он поддерживает 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 с помощью механизм шаблонов John Resig на Веб-сайт. Они немного изменили его, вы можете проверить этот 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.