Share
Vor einiger Zeit habe ich Ihnen gezeigt, wie Sie das jQuery-Template-Plugin in einem kurzen Tipp verwenden. In diesem kurzen Tipp zeige ich Ihnen, wie Sie eine andere Vorlagenbibliothek, Moustache, verwenden, die genauso einfach zu verwenden ist.
Sie können Mustache.js von der GitHub-Projektseite herunterladen. Wenn Sie es in einem Projekt verwenden möchten, können Sie es herunterladen oder Git Klon es; Ich habe gerade auf die Rohdatei auf GitHub für diesen kurzen Hinweis verwiesen:
Jetzt können Sie Daten zum Rendern verwenden!
Wahrscheinlich erhalten Sie Ihre Daten in Form von JSON vom Server, wenn Sie in der Produktion "Schnurrbart" verwenden. Es ist jedoch genauso einfach, ein Objekt-Literal hart zu codieren und es zu verwenden, was wir hier tun.
Accentsconagua
var data = name: "Some Tuts + Sites", sites: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: function () return-Funktion (text, render) text = render (text); var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; return '' + text + ''; ; Nun können wir die Vorlage definieren.
Ihre Vorlage ist einfach eine Zeichenkette. Sie können entweder eine normale alte JavaScript-Zeichenfolge verwenden oder die Vorlage in ein Skript-Tag einfügen und es über etwas wie jQuery erhalten html () Methode (oder natürlich, innerHTML). Dies ist wahrscheinlich die bessere Wahl, wenn Sie eine komplizierte Vorlage verwenden, da Sie Zeilenumbrüche verwenden können. Denken Sie daran, dem Skript einen anderen Typ als "Text / Javascript" zu geben. Andernfalls versuchen Browser möglicherweise, es zu interpretieren. Dies führt zu Fehlern.
Ihre Vorlage wird hauptsächlich HTML sein. Wenn Sie einen Wert aus Ihren Daten verwenden möchten, verweisen Sie auf den Schlüsselnamen des Werts in den Daten. Um die Name Wert in den obigen Daten, würden Sie es so referenzieren:
Name
Blöcke sind ein wichtiges Stück Schnurrbart: Sie können sie verwenden, um in Arrays und Objekte sowie für Lambdas (Funktionen) zu gelangen. Es ist ziemlich einfach, Blöcke zu machen: Verwenden Sie einfach ein öffnendes und ein schließendes Tag: Das öffnende beginnt mit einem Pfund (#) und das schließende mit einem Schrägstrich (/)..
Beim Durchlaufen von Arrays erhält der implizite Operator "." Den Wert. Ob Websites War ein Objekt, würden Sie die Schlüssel innerhalb des Blocks verwenden.
Die Verwendung von Funktionen ist etwas schwieriger. Für den Datenteil benötigt Mustache.js eine Funktion das kehrt zurück die zu verwendende Funktion. Diese Funktion erhält den zu rendernden Text (den gesamten Text innerhalb der Mustache-Funktions-Tags) und eine Funktion, die die Vorlagen-Tags im Text darstellt. Was immer diese Funktion zurückgibt, wird dann in die Tags eingefügt. Sie können dies bei der Arbeit in sehen URLs Funktion in den Daten oben.
Es ist sehr einfach, das HTML zu rendern:
html = Mustache.to_html (Vorlage, Daten);
Dann können Sie das HTML-Dokument an beliebiger Stelle speichern.
var Daten, Vorlage, HTML; data = name: "Some Tuts + Sites", sites: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: function () return Funktion (Text, Rendern) Text = Rendern (Text); var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; return '' + text + ''; ; template = " Name
Um mehr über Moustache zu erfahren, besuchen Sie die Website. Viel Spass damit!
