jQuery Templating Engines [geschlossen]

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?

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.

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

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

Jemand nahm Resigs Micro-Templating-Lösung und packte sie in ein jQuery-Plugin.

Ich werde dies verwenden, bis Resig sein eigenes veröffentlicht (wenn er sein eigenes veröffentlicht).

Danke für den Tipp, ewbi.

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

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/

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

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

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

Andere Ressourcen

• Eine schöne Präsentation zum Thema http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

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

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

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

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

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

John Resig hat einen, den er in seinem Blog gepostet hat. http://ejohn.org/blog/javascript-micro-templating/

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.

Ich habe jtemplates jquery pluging verwendet, aber die Leistung war wirklich schlecht. Ich habe zu trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) gewechselt, das eine viel bessere Leistung bietet. Ich habe keine Probleme mit IE7 oder FF bemerkt.

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.

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

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.

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

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.