Silniki szablonów jQuery [zamknięte]

204

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?

Maurice
źródło
1
Chciałem dwa razy zmienić to pytanie :)
Mark Schultheiss
1
Sprawdziłbym bardzo ładne (ale przed beta) JSViews i JSRender, wydają się być potencjalnym oficjalnym silnikiem szablonów JQuery / UI (przynajmniej tak mówi mapa)
Eran Medan
1
JsRender ma teraz publiczną wersję beta: borismoore.com/2012/03/…
John Papa
Używam teraz szablonów DoT, dobrej wydajności i notacji typu wąsy
Eran Medan

Odpowiedzi:

109

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.

ewbi
źródło
3
github.com/jquery/jquery-tmpl to repozytorium wtyczki szablonów Resiga.
Alexander Bird,
@ Thr4wn, źródłem w repro jest znacznie biblioteka omówiona w powiązanych artykułach. Oczywiście oba z Resig.
Frank Schwieterman,
@Frank ”źródło w repozytorium jest znacznie większe niż biblioteka omawiana w powiązanych artykułach„ Um huh? Powiedz co Nie jestem pewien, co przez to rozumiesz.
Mark Schultheiss,
2
@Mark: miał na myśli „znacząco inny niż”.
Domenic,
Nie widziałem przy tym żadnych przykładów złożonych form. Czy ktoś badał, co to znaczy, np. Dodać wiersz, część całego szablonu, aby pomieścić nowy element w formie związanej z tablicą obiektu? Szablon obejmowałby szablonowanie indeksów elementów tablic i mógłby być odpowiednio serializowany dla testu POST. Ale mam problem z przemyśleniem tego. Celem jest funkcjonalność podobna do InfoPath. (Zdaję sobie sprawę z różnych istniejących funkcji i alternatywnych ścieżek).
Jason Kleban
47

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

Todd Menier
źródło
+1. Ale użyłem Ricka Strahla. Bcoz jest mały i dobrze służy mojemu celowi.
IsmailS
właśnie ogłoszono, że jest to teraz oficjalna wtyczka
serg
20
Niestety został amortyzowany . jakiś forker?
Onesimus Bez ograniczeń
3
Czy scenariusz zmienił się teraz w 2012 r., To znaczy, czy są lepsze rozwiązania do tworzenia szablonów przy użyciu bibliotek opracowanych na podstawie oryginalnego skryptu resig?
Rajat Gupta,
4
@OnesimusUnbound Został super-seedowany przez JS Render. github.com/BorisMoore/jsrender
Blowsie
17

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 ...

Tomasz Mazur
źródło
To nie robi struktur kontrolnych (ifs i pętli)
mahemoff
13

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/

jonsequitur
źródło
11

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

Chris Vest
źródło
poza swoimi ograniczeniami, PURE jest bardzo łatwy w użyciu
Jader Dias
@Jader, jakie ograniczenia są najbardziej bolesne?
Mic
@Mic PURE jest ograniczony projektowo. W silnikach szablonów po stronie serwera nie musisz trzymać się prawidłowego HTML, ale PURE jest oparty na HTML. Sądzę jednak, że istnieją dziwactwa, które pozwoliłyby, aby inny silnik szablonów javascript był tak potężny jak te po stronie serwera.
Jader Dias,
@Jader, ok tylko dla HTML. Ale nie rozumiem, co masz na myśli przez dziwactwa i inny silnik.
Mic
@Mic PURE powinien zostać przepisany od nowa, aby umożliwić włączenie niektórych funkcji. Aby zezwolić na nieprawidłowe szablony HTML, należy używać scripttagów z atrybutem typeinnym niż text/javascript. To jest jedno „dziwactwo”, które pozwoliłoby na nieprawidłowy HTML.
Jader Dias,
7

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

Inne zasoby

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

Eran Medan
źródło
4

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

molokoloco
źródło
3

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).

levik
źródło
2

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

Yann
źródło
1
Czy jest jakiś konkretny widelec, na który należy szukać poprawek?
Kevin Hakanson
TBH, to trochę brudny ... Poszedłem na github.com/appendto/jquery-tmpl po szybkim skanowaniu na zmiany i biorąc pod uwagę fakt, że appendTo jest spółką. YMMV
Yann
jquery-tmpl zostało złożone w oficjalnej dystrybucji 1.4.3.
Yann
1

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.

McKamey
źródło
1

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.

Donovan Walker
źródło
0

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/ .

studgeek
źródło
0

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ś.

s-sharma
źródło
-1

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.

mpapis
źródło