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

204

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

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

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

Морис
источник
1
Я хотел поднять этот вопрос дважды :)
Марк Шультхайс
1
Я бы проверил очень хорошие (но до бета-версии) JSViews и JSRender, которые кажутся потенциальными официальными шаблонизаторами JQuery / UI (по крайней мере, так говорится в «дорожной карте»)
Эран Медан
1
У JsRender теперь есть публичный кандидат на бета-версию: borismoore.com/2012/03/…
Джон Папа,
Сейчас я использую шаблоны DoT, хорошую производительность и усы, как запись
Eran Medan

Ответы:

109

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

ewbi
источник
3
github.com/jquery/jquery-tmpl - это реальное хранилище шаблонов плагина Resig.
Александр Берд
@ Thr4wn, источник в репродукции значительно больше, чем библиотека, обсуждаемая в связанных статьях. Оба, хотя и Resig, конечно.
Фрэнк Швитерман
@Frank "источник в репродукции значительно больше, чем библиотека, обсуждаемая в связанных статьях" Угу? Чего-чего? Не уверен, что вы подразумеваете под этим вообще.
Марк Шультхайс
2
@Mark: он имел в виду «значительно отличается от».
Доменик
Я не видел примеров сложных форм, созданных с этим. Кто-нибудь исследовал, что нужно, чтобы добавить строку, некоторую часть целого шаблона, чтобы разместить новый элемент в форме, связанной с массивом объекта? Шаблон будет включать в себя шаблоны индексов элементов массивов и может быть надлежащим образом сериализован для POSTing. Но мне трудно все обдумать. Цель - функциональность, подобная InfoPath. (Я знаю о различных существующих функциях инфопата и альтернативах инфопата.)
Джейсон Клебан
47

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

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

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

Тодд менье
источник
+1. Но я использовал Рик Страл. Потому что это маленький и хорошо служит моей цели.
IsmailS
только что было объявлено, что теперь это официальный плагин
serg 7.10.10
20
К сожалению, это было амортизировано . любой форкер?
OnesimusUnbound
3
Изменился ли сейчас сценарий в 2012 году, я имею в виду, есть ли лучшие решения для шаблонов с использованием библиотек, разработанных поверх оригинального скрипта resig?
Раджат Гупта
4
@OnesimusUnbound Это был супер-посеянный JS Render. github.com/BorisMoore/jsrender
Blowsie
23

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

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

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

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

KevBurnsJr
источник
7
Теперь это стало jQote2: aefxx.com/jquery-plugins/jqote2
Алекс Ангас
17

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>

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

Томаш Мазур
источник
Это не делает управляющие структуры (ifs и
loop
13

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/

jonsequitur
источник
11

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

Крис Вест
источник
Помимо ограничений, PURE очень прост в использовании
Jader Dias
@Jader, какие ограничения самые болезненные?
Микрофон
@Mic PURE ограничен дизайном. В серверных шаблонизаторах вам не нужно придерживаться правильного HTML, но PURE основан на HTML. Но я думаю, что есть причуды, которые позволили бы другому движку шаблонов javascript быть столь же мощным, как серверный.
Джадер Диас
@Jader, хорошо только для HTML. Но я не понял, что вы подразумеваете под причудами и другим движком.
Mic
@Mic PURE должен быть переписан с нуля, чтобы можно было включить некоторые функции. Чтобы разрешить недопустимые шаблоны HTML, вы должны использовать scriptтеги с атрибутом, typeотличным от text/javascript. Это одна из "причуд", которая допускает недопустимый HTML.
Джадер Диас
7

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

Если вы ищете самый быстрый , вот хороший тест , кажется, что 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

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

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

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

Эран Медан
источник
4

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

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

molokoloco
источник
3

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

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

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

Левик
источник
2

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

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

Yann
источник
1
Любая конкретная вилка, чтобы посмотреть на исправления?
Кевин Хакансон
TBH, это немного грязно ... Я пошел на github.com/appendto/jquery-tmpl после быстрого сканирования изменений и учитывая тот факт, что appendto является компанией. YMMV
Янн
jquery-tmpl был свернут в официальном дистрибутиве 1.4.3.
Янн
1

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

mckamey
источник
1

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

EShy
источник
1

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

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

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

Донован Уокер
источник
0

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

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

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

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

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

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

studgeek
источник
0

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

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

S-Sharma
источник
0

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

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

BNY
источник
-1

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

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

mpapis
источник