silniki szablonów jQuery [zamknięte]

Właśnie zrobiłem kilka badań na ten temat i będę używać jquery-tmpl . Dlaczego?

1. został napisany przez Johna Resiga.
2. będzie utrzymywany przez główny zespół jQuery jako" oficjalny " plugin. EDIT: zespół jQuery wycofał tę wtyczkę.
3. zapewnia idealną równowagę między prostotą a funkcjonalnością.
4. ma bardzo czystą i przemyślaną składnię.
5. domyślnie koduje HTML.
6. jest wysoce rozszerzalny.

Więcej tutaj: http://forum.jquery.com/topic/templating-syntax

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

Ktoś wziął rozwiązanie Resig ' s micro-template i spakował je do wtyczki jQuery.

Będę używać tego dopóki Resig nie wyda swojego własnego (jeśli wyda swój własny).

Dzięki za wskazówkę, ewbi.

JQuery Nano :

Szablon Silnika

Podstawowe Użycie

Zakładając, że masz następującą odpowiedź JSON:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

Możesz zrobić:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

And you get ready string:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

Strona testowa...

JQuery - tmpl będzie w rdzeniu jQuery zaczynającym się w jQuery 1.5:

Http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

Oficjalna dokumentacja jest tutaj:

Http://api.jquery.com/category/plugins/templates/

EDIT: został pominięty w jQuery 1.5 i będzie teraz koordynowany przez zespół jQuery UI, ponieważ będzie zależny od nadchodzącego jQuery UI / Align = "left" /

Http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

Nie wiem, jak radzi sobie z konkretnym problemem, ale jest też silnik szablonów PURE .

To zależy jak zdefiniujesz "najlepsze", zapraszam do mojego posta tutaj w temacie

Jeśli szukasz najszybszego , Oto ładny benchmark , wygląda na to, że DoT wygrywa i zostawia wszystkich za sobą

Jeśli szukasz najbardziej official jQuery plugin, oto co znalazłem

Część I: Szablony JQuery

Beta, tymczasowo-oficjalny jQuery template plugin był taki http://api.jquery.com/category/plugins/templates/

Ale najwyraźniej, nie tak dawno temu zdecydowano się utrzymać go w wersji Beta...

Uwaga: zespół jQuery zdecydował się nie brać tej wtyczki do bety. Nie jest już aktywnie rozwijany ani utrzymywany. The docs pozostań tu na razie (w celach informacyjnych) aż do odpowiedniego wtyczka szablonu zastępczego jest gotowa.

Część II: następny krok

The new roadmap wydaje się dążyć do nowego zestawu wtyczek, JSRender (niezależny od DOM, a nawet silnika renderowania szablonów jQuery) i JSViews które mają ładne powiązanie danych i implementację obserwatora / obserwowalnego wzorca

Oto wpis na blogu w temacie

Http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

A oto najnowsze źródło

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

Inne zasoby

• Fajna prezentacja na ten temat http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Robocze dema: http://borismoore.github.com/jsviews/demos/index.html

Uwaga nie jest jeszcze w wersji beta, a tylko element mapy drogowej, ale wydaje się jak dobry kandydat, aby stać się oficjalnym rozszerzeniem JQuery/JQueryUI dla szablonów i wiązania UI

Http://garann.github.com/template-chooser / ten link jest naprawdę pomocny przy wyborze podstawowego szablonu Javascript.

Only to be the foolish ^^

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

To nie jest specyficzne dla jsquery, ale oto biblioteka szablonów oparta na JS wydana przez google jako open source:

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

Pozwala to na używanie elementów DOM jako szablonów i jest ponownie włączane (w tym przypadku wyjście z renderowania szablonu jest nadal szablonem, który może być ponownie renderowany za pomocą innego modelu danych).

Inni wskazali jquery-tmpl, a ja podałem te odpowiedzi. Ale pamiętaj, aby spojrzeć na widelce github.

Są tam ważne poprawki i interesujące funkcje. http://github.com/jquery/jquery-tmpl/network

John Resig ma taki, który zamieścił na swoim blogu. http://ejohn.org/blog/javascript-micro-templating/

Jeśli pracujesz w. NET Framework 2.0/3.5, powinieneś przyjrzeć się JBST zaimplementowanemu przez http://JsonFx.net. ma rozwiązanie template po stronie klienta, które ma znaną składnię JSP / ASP, ale jest wstępnie skompilowane w czasie kompilacji dla szablonów Compact Cache, które nie muszą być przetwarzane w czasie wykonywania. Działa dobrze z jQuery i innych bibliotek JavaScript jak same szablony są kompilowane do czystego JavaScript.

Używałem jtemplates jQuery pluging, ale wydajność była naprawdę zła. I switched to trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ), który ma znacznie lepszą wydajność. Nie zauważyłem żadnych problemów z IE7 lub FF.

Do bardzo lekkiej pracy jQuery-TMPL jest odpowiedni, ale wymaga w niektórych przypadkach, aby dane wiedziały jak się formatować (źle!).

Jeśli szukasz bardziej funkcjonalnej wtyczki do szablonów, proponuję Orange-J. Został zainspirowany przez Freemarker. Obsługuje if, else, pętle na obiektach i tablicach, wbudowany javascript, w tym szablony w szablonach i ma doskonałe opcje formatowania dla wyjścia (maxlen, wordboundary, htmlentities, itp).

Oh, and easy składnia.

Możesz pomyśleć trochę jak chcesz zaprojektować swoje szablony.

Problem z wieloma z wymienionych szablonów (jQote, jquery-tmpl, jTemplates) polega na tym, że wymagają one wstawiania nie-HTML do kodu HTML, co może być trudne do pracy w narzędziach HTML lub w procesie programowania z projektantami HTML. Osobiście nie podoba mi się to podejście, choć ma swoje plusy i minusy.

Istnieje inna klasa szablonów, które używają normalnego HTML, ale pozwalają aby wskazać powiązania danych z atrybutami elementów, klasami CSS lub zewnętrznymi mapowaniami.

Knockout jest dobrym przykładem tego podejścia, ale sam go nie używałem, więc pozostawiam to głosującym, aby zdecydować, czy inni to lubią, czy nie. Przynajmniej dopóki nie będę miał czasu, żeby się tym bardziej pobawić.

PURE wymienione jako inna odpowiedź jest kolejnym przykładem tego podejścia.

W celach informacyjnych można również spojrzeć na łańcuch.js , ale wydaje się, że nie został zaktualizowany dużo od czasu jego oryginalnego wydania. Więcej informacji na ten temat można znaleźć w http://javascriptly.com/2008/08/a-better-javascript-template-engine/.

Dropbox za pomocą silnika szablonów Johna Resiga na stronie internetowej. Trochę go zmodyfikowali, możesz sprawdzić w tym pliku JS dropbox. Poszukaj w tym pliku tmpl, a znajdziesz kod silnika szablonu.

Obecnie używam wielu szablonów HTML. Ten framework znacznie ułatwia import danych szablonowych do DOM. Również świetne modelowanie MVC.

Http://www.enfusion-framework.org / (spójrz na próbki!)

Istnieje również przepisanie PURE by beebole-jQuery pure HTML templates - https://github.com/mpapis/jquery-pure-templates

Powinno pozwolić na dużo bardziej automatyczne renderowanie głównie przy użyciu selektorów jquery, co ważniejsze nie wymaga umieszczania wymyślnych rzeczy w HTML.