Ich versuche, etwas über die neue Verwendung von Javascript als serverseitige Sprache und als funktionale Sprache zu lernen. Vor ein paar Tagen habe ich von node.js und Express Framework gehört. Dann sah ich underscore.js als eine Reihe von Dienstprogrammfunktionen. Ich habe diese Frage beim Stackoverflow gesehen . Es heißt, wir können underscore.js als Template-Engine verwenden. Jeder kennt gute Tutorials darüber, wie man underscore.js für Vorlagen verwendet, insbesondere für Biginner, die weniger Erfahrung mit fortgeschrittenem Javascript haben. Vielen Dank
262
Antworten:
Alles , was Sie über Strich Vorlage wissen müssen , ist hier . Nur 3 Dinge zu beachten:
<% %>
- um Code auszuführen<%= %>
- um einen Wert in der Vorlage zu drucken<%- %>
- um einige Werte zu drucken, ist HTML entkommenDas ist alles.
Einfaches Beispiel:
dann
tpl({foo: "blahblah"})
würde auf die Zeichenfolge gerendert<h1>Some text: blahblah</h1>
quelle
quelle
text/html
so, dass das Sagentype="text/html"
eine Lüge ist, Lügen können Probleme verursachen. Mit einem genauen Typ wie ztext/x-underscore
.type="foo/bar"
weil ich möchte, dass jeder weiß, dass es keine Rolle spielt, solange der Browser / Server es nicht erkennt und versucht etwas damit zu tun. Da HTML keine Art von Skript ist, fühle ich mich ziemlich sicher mit Text / HTML (John Resig verwendet es). Foo / Bar funktioniert auch :)*/x-*
Typen für " erfundene " Zwecke. Ich glaube nicht, dass es einentext/underscore
Typ in den offiziellen Registern gibt, also verwende ich ihn,text/x-underscore
weil ich paranoid bin und sie wirklich darauf aus sind, mich zu kriegen.In der einfachsten Form würden Sie es wie folgt verwenden:
Wenn Sie eine Vorlage einige Male verwenden, möchten Sie sie kompilieren, damit sie schneller ist:
Ich persönlich bevorzuge die Syntax im Moustache-Stil. Sie können die Vorlagenmarker-Markierungen anpassen, um doppelte geschweifte Klammern zu verwenden:
quelle
interpolate
Tipp hat nicht funktioniert, aber dies hat:_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };
Die Dokumentation zum Templating ist teilweise, ich habe mir die Quelle angesehen.
Die Funktion _.template hat 3 Argumente:
Wenn keine Daten (oder Null) angegeben werden, wird eine Renderfunktion zurückgegeben. Es hat 1 Argument:
Es gibt 3 Regex-Muster und 1 statischen Parameter in den Einstellungen:
Der Code in einem Bewertungsabschnitt wird einfach ausgewertet. Sie können der ausgewerteten Vorlage eine Zeichenfolge aus diesem Abschnitt mit dem Befehl __p + = "mystring" hinzufügen. Dies wird jedoch nicht empfohlen (nicht Teil der Vorlagenschnittstelle). Verwenden Sie stattdessen den Interpolationsabschnitt. Diese Art von Abschnitt dient zum Hinzufügen von Blöcken wie if oder for zur Vorlage.
Das Ergebnis des Codes im Interpolationsabschnitt wird der ausgewerteten Vorlage hinzugefügt. Wenn null zurückgegeben wird, wird eine leere Zeichenfolge hinzugefügt.
Der Escape- Abschnitt maskiert HTML mit _.escape für den Rückgabewert des angegebenen Codes. So sein ähnlich als ein _.escape (Code) in einem Interpolations - Abschnitt, aber es entkommt mit \ den Zeichen wie Leerzeichen \ n bevor er den Code an die gibt _.escape . Ich weiß nicht, warum das so wichtig ist, es steht im Code, aber es funktioniert gut mit der Interpolation und _.escape - was den Leerzeichen nicht entgeht - auch.
Standardmäßig wird die Daten wird der Parameter durch eine bestandene mit (Daten) {...} Aussage, aber diese Art der Auswertung ist viel langsamer als der mit dem Namen Variable auswertet. Die Daten mit dem Variablenparameter zu benennen ist also etwas Gutes ...
Beispielsweise:
Ergebnisse
Weitere Beispiele zur Verwendung der Vorlage und zum Überschreiben der Standardeinstellungen finden Sie hier: http://underscorejs.org/#template
Beim Laden von Vorlagen haben Sie viele Optionen, aber am Ende müssen Sie die Vorlage immer in eine Zeichenfolge konvertieren. Sie können es wie im obigen Beispiel als normale Zeichenfolge angeben oder es aus einem Skript-Tag laden und die .html () -Funktion von jquery verwenden, oder Sie können es aus einer separaten Datei mit dem tpl-Plugin von require.js laden .
Eine weitere Option, um den Dom-Baum mit Laconic zu erstellen, anstatt Vorlagen zu erstellen .
quelle
Ich gebe ein sehr einfaches Beispiel
1)
Das Ergebnis wäre
2) Dies ist eine Vorlage
Das ist HTML
Dies ist der Javascript-Code, der das JSON-Objekt enthält und die Vorlage in HTML einfügt
quelle
Mit Express ist es so einfach. Sie müssen lediglich das Konsolidierungsmodul auf dem Knoten verwenden, damit Sie es installieren können:
Dann sollten Sie die Standard-Engine folgendermaßen in eine HTML-Vorlage ändern:
Registrieren Sie die Unterstrich-Vorlagen-Engine für die HTML-Erweiterung:
es ist fertig !
Laden Sie nun zum Beispiel eine Vorlage namens 'index.html':
Ich hoffe das hat dir geholfen!
quelle
Ich wollte noch eine wichtige Erkenntnis teilen.
Die Verwendung von <% = variable => würde zu einer Sicherheitsanfälligkeit bezüglich Cross-Site-Scripting führen. Daher ist es sicherer, stattdessen <% - variable -> zu verwenden.
Wir mussten <% = durch <% ersetzen, um Cross-Site-Scripting-Angriffe zu verhindern. Ich bin mir nicht sicher, ob dies Auswirkungen auf die Leistung hat
quelle
Lodash ist auch das gleiche. Schreiben Sie zuerst ein Skript wie folgt:
Schreiben Sie nun einige einfache JS wie folgt:
Wobei popoup ein div ist, in dem Sie die Tabelle generieren möchten
quelle