jQuery Templating Engines [geschlossen]

204

Ich suche nach einer Template-Engine für die Client-Seite. Ich habe einige wie jsRepeater und jQuery Templates ausprobiert. Während sie in FireFox in Ordnung zu sein scheinen, scheinen sie alle in IE7 zusammenzubrechen, wenn es um das Rendern von HTML-Tabellen geht.

Ich habe mir auch MicrosoftAjaxTemplates.js angesehen (von http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ), aber es stellte sich heraus, dass das gleiche Problem vorliegt.

Irgendwelche Ratschläge zu anderen Vorlagenmotoren?

Maurice
quelle
1
Ich wollte diese Frage zweimal hochklappen :)
Mark Schultheiss
1
Ich würde die sehr netten (aber vor der Beta) JSViews und JSRender überprüfen, die wie eine potenzielle offizielle JQuery / UI-Template-Engine erscheinen (zumindest ist dies die Roadmap)
Eran Medan,
1
JsRender hat jetzt einen öffentlichen Beta-Kandidaten: borismoore.com/2012/03/…
John Papa
Ich verwende jetzt DoT-Vorlagen, gute Leistung und Schnurrbart-ähnliche Notation
Eran Medan

Antworten:

109

Schauen Sie sich Rick Strahls Post- Client-Vorlage mit jQuery an . Er erkundet jTemplates, macht dann aber ein besseres Argument für John Resigs Micro-Templating-Lösung und verbessert sie sogar ein wenig. Gute Vergleiche, viele Proben.

ewbi
quelle
3
github.com/jquery/jquery-tmpl ist das eigentliche Repo des Vorlagen-Plugins von Resig.
Alexander Bird
@ Thr4wn, die Quelle bei der Repro ist deutlich die Bibliothek, die in den verlinkten Artikeln besprochen wird. Beide von Resig, klar.
Frank Schwieterman
@Frank "Die Quelle bei der Repro ist deutlich die Bibliothek, die in den verlinkten Artikeln besprochen wird." Um huh? Sag was? Ich bin mir nicht sicher, was du damit meinst.
Mark Schultheiss
2
@ Mark: er meinte "deutlich anders als".
Domenic
Ich habe keine Beispiele für komplexe Formen gesehen, die damit gebaut wurden. Hat jemand untersucht, was erforderlich ist, um eine Zeile, einen Teil einer ganzen Vorlage, hinzuzufügen, um ein neues Element in das Formular aufzunehmen, das an das Array eines Objekts gebunden ist? Die Vorlage würde Vorlagen für die Elementindizes von Arrays enthalten und könnte für das POSTing ordnungsgemäß serialisiert werden. Aber ich habe Probleme, alles durchzudenken. Das Ziel ist die InfoPath-ähnliche Funktionalität. (Ich bin mir der verschiedenen vorhandenen Infopathenmerkmale und Infopathenalternativen bewusst.)
Jason Kleban
47

Ich habe gerade ein paar Nachforschungen angestellt und werde jquery-tmpl verwenden . Warum?

  1. Es ist von John Resig geschrieben.
  2. Es wird vom jQuery-Kernteam als "offizielles" Plugin gepflegt. BEARBEITEN: Das jQuery-Team hat dieses Plugin abgelehnt.
  3. Es schafft eine perfekte Balance zwischen Einfachheit und Funktionalität.
  4. Es hat eine sehr saubere und gut durchdachte Syntax.
  5. Es ist standardmäßig HTML-codiert.
  6. Es ist sehr erweiterbar.

Mehr hier: http://forum.jquery.com/topic/templating-syntax

Todd Menier
quelle
+1. Aber ich habe Rick Strahls benutzt. Bcoz, es ist klein und erfüllt meinen Zweck gut.
IsmailS
Es wurde gerade angekündigt, dass dies nun das offizielle Plugin ist
Serg
20
Leider wurde es abgeschrieben . irgendein Forker?
OnesimusUnbound
3
Hat sich das Szenario jetzt im Jahr 2012 geändert? Ich meine, gibt es bessere Lösungen für Vorlagen, indem Bibliotheken verwendet werden, die auf dem ursprünglichen Skript von resig basieren?
Rajat Gupta
4
@OnesimusUnbound Es wurde von JS Render super gesetzt. github.com/BorisMoore/jsrender
Blowsie
17

jQuery Nano :

Template Engine

Grundlegende Verwendung

Angenommen, Sie haben folgende JSON-Antwort:

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

du kannst das schaffen:

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

und du machst dich bereit String:

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

Testseite ...

Tomasz Mazur
quelle
Dies macht keine Kontrollstrukturen (ifs und Schleifen)
Mahemoff
13

jQuery-tmpl befindet sich ab jQuery 1.5 im jQuery-Kern:

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

Die offizielle Dokumentation finden Sie hier:

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


BEARBEITEN: Es wurde in jQuery 1.5 weggelassen und wird nun vom jQuery UI-Team koordiniert, da es eine Abhängigkeit vom kommenden jQuery UI Grid sein wird.

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

Jonsequitur
quelle
11

Ich bin mir nicht sicher, wie es Ihr spezifisches Problem behandelt, aber es gibt auch die PURE- Vorlagen-Engine.

Chris Vest
quelle
Abgesehen von seinen Einschränkungen ist PURE sehr einfach zu bedienen
Jader Dias
@Jader, welche Einschränkungen sind am schmerzhaftesten?
Mic
@Mic PURE ist vom Design her begrenzt. In serverseitigen Template-Engines müssen Sie sich nicht an gültiges HTML halten, aber PURE basiert auf HTML. Aber ich denke, es gibt Macken, die es einer anderen Javascript-Template-Engine ermöglichen würden, genauso leistungsfähig zu sein wie die serverseitigen.
Jader Dias
@Jader, ok nur für HTML. Aber ich habe nicht verstanden, was du mit Macken und einem anderen Motor meinst.
Mic
@Mic PURE sollte von Grund auf neu geschrieben werden müssen, damit einige Funktionen enthalten sein können. Um ungültige HTML-Vorlagen zuzulassen, sollten Sie scriptTags mit anderen Attributen typeals verwenden text/javascript. Dies ist eine "Eigenart", die ungültiges HTML zulässt.
Jader Dias
7

Es hängt davon ab, wie Sie "am besten" definieren. Bitte lesen Sie meinen Beitrag hier zum Thema

Wenn Sie nach dem schnellsten suchen , hier ist ein schöner Benchmark , es scheint, dass DoT gewinnt und alle anderen zurücklässt

Wenn Sie nach dem offiziellsten JQuery-Plugin suchen , habe ich Folgendes herausgefunden

Teil I: JQuery-Vorlagen

Das vorübergehend offizielle Beta - JQuery-Vorlagen-Plugin war dieses http://api.jquery.com/category/plugins/templates/

Aber anscheinend wurde vor nicht allzu langer Zeit beschlossen, es in der Beta zu behalten ...

Hinweis: Das jQuery-Team hat beschlossen, dieses Plugin nicht nach der Beta zu verwenden. Es wird nicht mehr aktiv entwickelt oder gepflegt. Die Dokumente bleiben vorerst hier (als Referenz), bis ein geeignetes Ersatzvorlagen-Plugin bereitsteht.

Teil II: Der nächste Schritt

Die neue Roadmap scheint auf eine Reihe neuer Plugins zu zielen, JSRender (unabhängig von DOM und sogar der JQuery Template Rendering Engine) und JSViews die eine nette Datenbindung und Implementierung von Beobachtern / beobachtbaren Mustern aufweisen

Hier ist der Blogbeitrag zum Thema

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

Und hier ist die neueste Quelle

Andere Ressourcen

Beachten Sie, dass es sich noch nicht einmal in der Beta-Phase befindet und nur ein Roadmap-Element ist. Es scheint jedoch ein guter Kandidat zu sein, um eine offizielle JQuery / JQueryUI-Erweiterung für Vorlagen und UI-Bindungen zu werden

Eran Medan
quelle
4

Nur um der Dummkopf zu sein ^^

// 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
quelle
3

Dies ist nicht jsquery-spezifisch, aber hier ist eine JS-basierte Vorlagenbibliothek, die von Google als Open Source veröffentlicht wurde:

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

Dies ermöglicht die Verwendung von DOM-Elementen als Vorlagen und ist neu (da die Ausgabe eines Vorlagen-Renderings immer noch eine Vorlage ist, die mit einem anderen Datenmodell neu gerendert werden kann).

Levik
quelle
2

Andere haben auf jquery-tmpl hingewiesen, und ich habe diese Antwort positiv bewertet. Aber schauen Sie sich unbedingt die Github-Gabeln an.

Es gibt wichtige Korrekturen und interessante Funktionen. http://github.com/jquery/jquery-tmpl/network

Yann
quelle
1
Gibt es eine bestimmte Gabel, um nach Korrekturen zu suchen?
Kevin Hakanson
TBH, es ist ein bisschen chaotisch ... Ich habe mich nach einem kurzen Scan der Änderungen und der Tatsache, dass Appendto ein Unternehmen ist, für github.com/appendto/jquery-tmpl entschieden . YMMV
Yann
jquery-tmpl wurde in der offiziellen 1.4.3-Distribution gefaltet.
Yann
1

Wenn Sie in .NET Framework 2.0 / 3.5 arbeiten, sollten Sie sich JBST ansehen, wie es von http://JsonFx.net implementiert wird . Es verfügt über eine clientseitige Vorlagenlösung mit vertrauter JSP / ASP-Syntax, die jedoch zur Erstellungszeit für kompakte cachefähige Vorlagen vorkompiliert wird, die zur Laufzeit nicht analysiert werden müssen. Es funktioniert gut mit jQuery und anderen JavaScript-Bibliotheken, da die Vorlagen selbst zu reinem JavaScript kompiliert werden.

mckamey
quelle
1

Für sehr leichte Arbeiten ist jquery-tmpl ausreichend, erfordert jedoch in einigen Fällen, dass die Daten wissen, wie sie sich selbst formatieren (schlechte Sache!).

Wenn Sie nach einem umfassenderen Vorlagen-Plugin suchen, würde ich Orange-J empfehlen . Es wurde von Freemarker inspiriert. Es unterstützt, wenn sonst Objekte und Arrays, Inline-Javascript, einschließlich Vorlagen in Vorlagen, durchlaufen werden, und verfügt über hervorragende Formatierungsoptionen für die Ausgabe (maxlen, wordboundary, htmlentities usw.).

Oh, und einfache Syntax.

Donovan Walker
quelle
0

Vielleicht möchten Sie ein wenig darüber nachdenken, wie Sie Ihre Vorlagen gestalten möchten.

Ein Problem bei vielen der aufgelisteten Vorlagenlösungen (jQote, jquery-tmpl, jTemplates) besteht darin, dass Sie Nicht-HTML in Ihr HTML einfügen müssen. Dies kann in HTML-Tools oder in einem Entwicklungsprozess mit HTML-Designern schwierig sein . Ich persönlich mag das Gefühl dieses Ansatzes nicht, obwohl er seine Vor- und Nachteile hat.

Es gibt eine andere Klasse von Vorlagenansätzen, die normales HTML verwenden, es Ihnen jedoch ermöglichen, Datenbindungen mit Elementattributen, CSS-Klassen oder externen Zuordnungen anzugeben.

Knockout ist ein gutes Beispiel für diesen Ansatz, aber ich habe ihn nicht selbst verwendet, daher überlasse ich es den Abstimmungen, zu entscheiden, ob es anderen gefällt oder nicht. Zumindest bis ich Zeit habe, mehr damit zu spielen.

PURE als weitere Antwort aufgeführt ist ein weiteres Beispiel für diesen Ansatz.

Als Referenz können Sie sich auch chain.js ansehen , aber es scheint seit seiner ursprünglichen Veröffentlichung nicht viel aktualisiert worden zu sein. Weitere Hintergrundinformationen finden Sie unter http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

studgeek
quelle
0

Dropbox mit John Resigs Template Engine auf der Website. Sie haben es ein wenig modifiziert, das Sie in dieser js-Datei von dropbox einchecken können . Suchen Sie in dieser Datei nach tmpl und Sie erhalten den Code der Template-Engine.

Vielen Dank. Hoffe, es wird für jemanden nützlich sein.

S-Sharma
quelle
0

Ich verwende derzeit ein Multi-HTML-Template-Framework. Dieses Framework erleichtert das Importieren von Vorlagendaten in Ihr DOM erheblich. Auch tolle MVC-Modellierung.

http://www.enfusion-framework.org/ (siehe Beispiele!)

Bny
quelle
-1

Es gibt auch eine Neufassung von PURE by beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

Es sollte ein viel automatischeres Rendern ermöglichen, hauptsächlich mit JQuery-Selektoren. Wichtiger ist jedoch, dass keine ausgefallenen Dinge in HTML eingefügt werden müssen.

mpapis
quelle