Silniki szablonów jQuery [zamknięte]

Szukam silnika szablonów do obsługi po stronie klienta. Próbowałem kilka takich jak szablony jsRepeater i jQuery. Chociaż wydają się działać poprawnie w FireFoxie, wszystkie wydają się załamać w IE7, jeśli chodzi o renderowanie tabel HTML.

Przyjrzałem się także MicrosoftAjaxTemplates.js (z http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ), ale okazało się, że ma ten sam problem.

Wszelkie porady dotyczące innych silników szablonów do użycia?

Sprawdź post Rick Strahl Client Templating with jQuery . Eksploruje jTemplates, ale następnie stanowi lepsze uzasadnienie dla rozwiązania mikro-szablonów Johna Resiga , a nawet go ulepsza. Dobre porównania, dużo próbek.

Właśnie przeprowadziłem kilka badań na ten temat i użyję jquery-tmpl . Czemu?

1. Jest napisany przez Johna Resiga.
2. Zostanie utrzymany przez podstawowy zespół jQuery jako „oficjalna” wtyczka. EDYCJA: 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 do mikro-szablonów i spakował je do wtyczki jQuery.

Będę tego używał, dopóki Resig nie wyda własnego (jeśli go wyda).

Dzięki za wskazówkę, ewbi.

jQuery Nano :

Silnik szablonów

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)

i masz gotowy ciąg:

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

Strona testowa ...

jQuery-tmpl będzie w rdzeniu jQuery od jQuery 1.5:

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

Oficjalna dokumentacja znajduje się tutaj:

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

EDYCJA: Zostało wyłączone z jQuery 1.5 i będzie teraz koordynowane przez zespół interfejsu użytkownika jQuery, ponieważ będzie to zależność od nadchodzącej siatki interfejsu użytkownika jQuery.

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

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

To zależy od tego, jak zdefiniujesz „najlepszy”, zobacz mój post tutaj na ten temat

Jeśli szukasz najszybszego , tutaj jest dobry punkt odniesienia , wygląda na to, że DoT wygrywa i pozostawia wszystkich w tyle

Jeśli szukasz najbardziej oficjalnej wtyczki JQuery, oto, co znalazłem

Część I: Szablony JQuery

Beta, tymczasowo oficjalna wtyczka szablonu JQuery to http://api.jquery.com/category/plugins/templates/

Ale najwyraźniej nie tak dawno postanowiono zachować go w wersji Beta ...

Uwaga: Zespół jQuery postanowił nie brać tej wtyczki poza wersję beta. Nie jest już aktywnie rozwijany ani utrzymywany. Dokumenty pozostają tu na razie (w celach informacyjnych), dopóki odpowiednia wtyczka szablonu zastępczego nie będzie gotowa.

Część II: Następny krok

Nowa mapa drogowa zdają się dążyć do nowego zestawu wtyczek, JSRender (niezależnie od DOM i nawet JQuery szablon silnik renderowania) i JSViews które mają wiązania i obserwator / obserwowalne wdrożeniowe wzór niektóre dane ładne

Oto post na blogu na ten temat

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

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

• Działające wersje demonstracyjne: http://borismoore.github.com/jsviews/demos/index.html

Pamiętaj, że wciąż nie ma go nawet w wersji beta, a jedynie element mapy drogowej, ale wydaje się dobrym kandydatem do zostania oficjalnym rozszerzeniem JQuery / JQueryUI dla szablonów i wiązania interfejsu użytkownika

Tylko żeby być głupcem ^^

// 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życie elementów DOM jako szablonów i jest ponownie uruchamiane (ponieważ wynik renderowania szablonu jest nadal szablonem, który można ponownie renderować za pomocą innego modelu danych).

Inni wskazali na jquery-tmpl, a ja poparłem tę odpowiedź. Ale koniecznie spójrz na widelce github.

Istnieją ważne poprawki i ciekawe funkcje. http://github.com/jquery/jquery-tmpl/network

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

Jeśli pracujesz w .NET Framework 2.0 / 3.5, powinieneś spojrzeć na JBST zaimplementowany przez http://JsonFx.net . Ma szablonowe rozwiązanie po stronie klienta, które ma znaną składnię JSP / ASP, ale jest wstępnie kompilowane w czasie kompilacji dla kompaktowych szablonów z pamięcią podręczną, które nie muszą być analizowane w czasie wykonywania. Działa dobrze z jQuery i innymi bibliotekami JavaScript, ponieważ same szablony są kompilowane do czystego JavaScript.

Używałem wtyczki jtemplates jquery, ale wydajność była naprawdę zła. Przełączyłem się na 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 wystarcza jquery-tmpl, ale w niektórych przypadkach wymaga, aby dane wiedziały, jak się sformatować (zła rzecz!).

Jeśli szukasz bardziej funkcjonalnej wtyczki do szablonów, sugeruję Orange-J . Inspiracją był Freemarker. Obsługuje, jeśli, inaczej, pętle nad obiektami i tablicami, wbudowany javascript, w tym szablony w szablonach i ma doskonałe opcje formatowania danych wyjściowych (maxlen, granica słów, htmlentities itp.).

Aha, i łatwa składnia.

Możesz zastanowić się, jak zaprojektować szablony.

Jednym z problemów z wieloma z wymienionych rozwiązań szablonów (jQote, jquery-tmpl, jTemplates) jest to, że wymagają one wstawienia kodu innego niż HTML do kodu HTML, co może być utrudnione przy pracy z narzędziami HTML lub w procesie programowania z projektantami HTML . Osobiście nie podoba mi się to podejście, choć ma swoje zalety i wady.

Istnieje inna klasa podejść szablonowych, które wykorzystują normalny HTML, ale pozwalają wskazać powiązania danych z atrybutami elementu, klasami CSS lub odwzorowaniami zewnętrznymi.

Knockout jest dobrym przykładem tego podejścia, ale sam go nie wykorzystałem, więc pozostawiam go głosowaniu, aby zdecydować, czy innym się to podoba, czy nie. Przynajmniej dopóki nie będę miał czasu na zabawę.

PURE wymieniony jako kolejna odpowiedź jest kolejnym przykładem tego podejścia.

W celach informacyjnych możesz także zapoznać się z plikiem chain.js , ale wydaje się, że nie był zbytnio aktualizowany od czasu jego pierwotnego wydania. Więcej informacji na ten temat można znaleźć na stronie http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

Dropbox za pomocą silnika szablonów Johna Resiga na stronie internetowej. Mają trochę zmodyfikowane to można sprawdzić w tym pliku js Dropbox. Wyszukaj w tym pliku tmpl, a kodujesz silnik szablonu.

Dzięki. Mam nadzieję, że przyda się komuś.

Obecnie używam wielu szablonów HTML. Ramy te znacznie ułatwiają 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 przez Beebole - szablony HTML JQuery Pure - https://github.com/mpapis/jquery-pure-templates

Powinno to pozwolić na znacznie bardziej automatyczne renderowanie głównie przy użyciu selektorów jquery, co ważniejsze, nie wymaga wstawiania fantazyjnych rzeczy w HTML.