Двигуни шаблонів 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 як "офіційний" плагін. EDIT: Команда jQuery застаріла.
3. Він досягає ідеального балансу між простотою та функціональністю.
4. Він має дуже чистий і добре продуманий синтаксис.
5. Він за замовчуванням кодує HTML.
6. Це дуже розширюється.

Детальніше тут: http://forum.jquery.com/topic/templating-syntax

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

Хтось узяв мікро-шаблонне рішення Resig і запакував його у плагін jQuery.

Я буду користуватися цим, поки Резіг не випустить своє (якщо він випустить своє).

Дякую за пораду, евбі.

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/

EDIT: Він залишився поза jQuery 1.5 і тепер буде координуватися командою інтерфейсу jQuery, оскільки це буде залежністю від майбутніх сіток користувальницького інтерфейсу 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

І ось останнє джерело

• 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 pluging, але продуктивність була дуже поганою. Я перейшов на trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ), який має набагато кращі показники. Я не помітив жодних проблем із IE7 або FF.

Для дуже легкої роботи jquery-tmpl є адекватним, але в деяких випадках він вимагає, щоб дані знали, як форматувати себе (погано!).

Якщо ви шукаєте більш повнофункціональний плагін для шаблонів, я б запропонував Orange-J . Це надихнуло Фрімаркера. Він підтримує, якщо в іншому випадку, перетинає об'єкти та масиви, вбудовує 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-файл крапки. У цьому файлі знайдіть tmpl, і ви вкажете код шаблону.

Дякую. Сподіваюся, це комусь стане у нагоді.

Наразі я використовую мульти HTML-рамку шаблонів. Ця рамка значно спрощує імпорт шаблонових даних у вашу DOM. Також чудове моделювання MVC.

http://www.enfusion-framework.org/ (подивіться на зразки!)

Існує також переписання PURE by beebole - jquery pure html шаблони - https://github.com/mpapis/jquery-pure-templates

Це повинно дозволяти набагато більше автоматичного візуалізації здебільшого за допомогою селекторів jquery, що важливіше, що він не вимагає вводити в HTML химерні речі.