Irgendwelche Vorschläge, welche HTML-Vorlagenbibliothek gut zu JQuery passt? Beim Googeln tauchen eine ganze Reihe von Bibliotheken auf, aber ich bin mir nicht sicher, ob es eine anerkannte Bibliothek gibt, die den Test der Zeit bestehen würde.
javascript
jquery
templates
Shiva
quelle
quelle
Antworten:
Um ehrlich zu sein, ist das clientseitige Templating heutzutage sehr heiß, aber ein ziemlicher Dschungel.
Die beliebtesten sind, glaube ich:
Es gibt viele andere, aber Sie müssen sie testen, um zu sehen, was am besten zu Ihnen und Ihrem Projektstil passt.
Persönlich fällt es mir schwer, eine neue Syntax und einen neuen Satz von Logik hinzuzufügen ( Logik und Vorlage mischen, hallo ?? ), und ich ging rein js. Jede einzelne meiner Vorlagen wird in einer eigenen HTML-Datei (./usersTable.row.html) gespeichert. Ich verwende Vorlagen nur, wenn Inhalte bearbeitet werden, und ich habe nur wenige "logische" js-Dateien, eine für Tabellen, eine für div und eine für Listen. und nicht einmal eine für die Optionen von select (wo ich eine andere Methode verwende).
Jedes Mal, wenn ich versuchte, etwas Komplexeres zu tun, stellte ich fest, dass der Code weniger klar war und ich mehr Zeit für die Stabilisierung benötigte als auf die "alte" Weise. Die Logik in der Vorlage ist meiner Meinung nach völlig unsinnig, und das Hinzufügen einer eigenen Syntax fügt nur sehr schwer zu verfolgende Fehler hinzu.
quelle
jTemplates
quelle
Es gibt eine vernünftige Diskussion Dokument zu diesem Thema hier , die eine Reihe von Templating Tools abdeckt. Nicht spezifisch für jQuery.
quelle
jQuery Templates Plugin, erstellt von Microsoft und akzeptiert als offizielles jQuery Plugin.
Beachten Sie jedoch, dass es jetzt veraltet ist.
quelle
Ich würde json2html auschecken , es verzichtet auf das Schreiben von HTML-Snippets und verlässt sich stattdessen auf JSON-Transformationen, um JSON-Objektarrays in unstrukturierte Listen zu konvertieren. Sehr schnell und verwendet die DOM-Erstellung.
quelle
Vor ein paar Jahren habe ich IBDOM erstellt: http://ibdom.sf.net/ | Ab Dezember 2009 unterstützt es die jQuery-Bindung, wenn Sie sie direkt aus dem Trunk erhalten.
oder
Außerdem können Sie jetzt alle "data: propName" -Markierungen in die Attribute class = "data: propName other classnames" einfügen, sodass Sie den Inhalt Ihrer Anwendung nicht mit diesen Markierungen verunreinigen müssen.
Ich habe dort noch keine Dokumentation aktualisiert, um meine jüngsten Verbesserungen widerzuspiegeln, aber ich habe seit 2007 verschiedene Versionen dieses Frameworks in der Produktion.
An Skeptiker dieser Frage:
Als Microsoft mit IE5 das erfand, was wir heute als XmlHttpRequest und das "Ajax" -Muster kennen, bestand ein Teil des Versprechens dahinter darin, Daten lediglich zwischen einem Webbrowser und dem Server auszutauschen. Diese Daten sollten in XML eingekapselt werden, da XML 1999/2000 einfach so heiß war. Neben dem Abrufen eines XML-Dokuments über das Netzwerk mit einem Rückrufmechanismus unterstützte die MSXML ActiveX-Komponente von MS auch eine Vorentwurfsimplementierung von XSL-T und XPath.
Die Kombination aus dem Abrufen von HTTP / XML, XPath und XSL-T ermöglichte Entwicklern eine enorme Kreativität, um umfangreiche "Dokumente" zu erstellen, die sich wie "Anwendungen" verhielten, Daten lediglich vom Server sendeten und vor allem abriefen.
Warum ist das ein nützliches Muster? Dies hängt davon ab, wie komplex Ihre Benutzeroberfläche ist und wie wichtig Ihnen die Wartbarkeit ist.
Wenn Sie eine visuell sehr umfangreiche semantisch markierte Oberfläche mit erweitertem CSS erstellen, müssen Sie als letztes Markup-Teile in "Mini-Controller / Ansichten" zerlegen, damit Sie ein Dokumentfragment in das Haupt-HTML-Dokument einfügen können Dokument, und hier ist warum.
Ein wesentlicher Grundsatz für die Verwaltung einer erweiterten HTML / CSS-Benutzeroberfläche besteht darin, ihre Validierung zumindest während der aktiven Entwicklungsphase beizubehalten. Wenn Ihr Markup validiert ist, können Sie sich auf Ihre CSS-Fehler konzentrieren. Wenn nun Fragmente von Markups in verschiedenen Phasen der Benutzerinteraktion injiziert werden, wird die Verwaltung sehr unhandlich und das Ganze wird brüchig.
Die Idee war, alle Ihre Markup-UI-Konstrukte in einem einzigen Dokument zu haben, NUR DATEN über das Netzwerk abzurufen und ein solides Framework zu verwenden, das zumindest einfach Ihre Daten in Ihre Markup-Konstrukte einfügt und höchstens Markup-Konstrukte repliziert was Sie als wiederholbar markiert haben.
Dies war mit XSL-T und XPath in IE5 + möglich, aber praktisch mit keinem anderen Browser. Einige F / OSS-Browser-Frameworks haben sich mit XPath beschäftigt, aber darauf können wir uns noch nicht verlassen.
Was ist das nächstbeste, um ein solches Muster zu erreichen? IBDOM. Holen Sie sich Daten von Ihrem Server und fügen Sie sie in Ihr Dokument ein. mühelos.
quelle
Sie sollten sich Javascript-Templates ansehen. Dies ist eine kleine Template-Engine, die im berühmten Plugin zum Hochladen von jQuery-Dateien verwendet wird und vom selben Autor, Sebastian Tschan (@blueimp), entwickelt wurde.
https://github.com/blueimp/JavaScript-Templates
Befolgen Sie die Gebrauchsanweisung von Sebastian, entfernen Sie einfach diese Zeile
Ersetzen Sie es durch dieses
Vergessen Sie nicht, das div-Ergebnis-Tag auch in Ihre HTML-Datei einzufügen
Genießen
quelle