Es gibt viele Optionen für Knoten -Open -Source -Vorlagen, aber es wird empfohlen, dass ältere Menschen wie ich EJs verwenden. Es ist natürlich, EJs mit Erfahrung in klassischem ASP/PHP/JSP zu verwenden. Das heißt, Sie können JavaScript-Code im <%...%> Block anordnen und <%= Ausgangsvariable%> auf herkömmlichste Weise verwenden (zusätzlich <%-Ausgangsvariablen entkommen nicht den Symbolen wie &). Der Befehl EJS -Installation lautet wie folgt:
NPM EJS installieren
JS Rufen Sie an
Es gibt zwei Hauptmethoden von JS:
ejs.compile (str, option); // => Funktion ejs.render (str, Optionen); // => str
Tatsächlich können EJs beispielsweise unabhängig von Express verwendet werden:
var ejs = required (''), str = required ('fs'). ReadFilesync (__ Dirname + '/List.ejs', 'utf8'); var ret = ejs.render (str, {names: ['foo', 'bar', 'baz']}); console.log (ret); Siehe ejs.render (). Der erste Parameter ist die Zeichenfolge der Vorlage, und die Vorlage lautet wie folgt. < %if (names.length) { %> <ul> < %names.foreach (Funktion (Name) { %> <li foo = '< %= name + "'" %> '> < %= name %> </li> < %}) %> </ul> < %} %>Namen werden zu lokalen Variablen.
Optionsparameter
Der zweite Parameter sind Daten, die normalerweise ein Objekt sind. Dieses Objekt kann als Option angesehen werden, was bedeutet, dass die Daten und die Auswahl auf demselben Objekt enthalten sind.
Wenn Sie nicht jedes Mal Datenträger haben möchten, müssen Sie die Vorlage zwischenspeichern und Optionen festlegen. FileName. Zum Beispiel:
var ejs = required ('../'), fs = required ('fs'), path = __dirname + '/functions.ejs', str = fs.readFilesync (Pfad, 'utf8'); var user = []; Benutzer.push ({Name: 'Tobi', Alter: 2, Spezies: 'Ferret'}) Benutzer. console.log (ret);Befehl inculde
Und wenn Sie wollen
<ul> < % user.foreach (Funktion (Benutzer) { %> < % Einschließen Benutzer/Show %> < %}) %> </ul>Im Allgemeinen müssen Sie die Option "Dateiname" festlegen, um die Funktion mit Einfügen zu starten. Andernfalls kennt das include -Include das Verzeichnis, in dem sie sich befindet.
Vorlage:
<h1> Benutzer </h1> < %Funktion Benutzer (Benutzer) { %> <li> <strong> < %= Benutzer.EJS unterstützt das Kompilieren von Vorlagen. Nach der Templat -Kompilierung gibt es keine IO -Operation, es wird sehr schnell sein und kann für lokale Variablen verwendet werden. Das folgende Beispiel für Benutzer/Show ignoriert die EJS -Erweiterung:
<ul> < % user.foreach (Funktion (Benutzer) { %> < % Einschließen Benutzer/Show %> < %}) %> </ul>Custom Close Token
Wenn Sie vorhaben, <h1> {{{= title}} </h1> im Allgemeinen nicht-<%%> Tag zu verwenden, können Sie es auch anpassen.
var ejs = require ('ejs'); ejs.open = '{{{'; ejs.close = '}}'; Die Formatausgabe ist auch in Ordnung. ejs.filters.last = function (obj) {return obj [obj.length - 1]; }; Angerufen:<p> <%=: Benutzer | Last %> </p>EJS unterstützt auch Browserumgebungen.
<html> <head> <script src="../ejs.js"></script> <script id="users" type="text/template"> <% if (names.length) { %> <ul> <% names.forEach(function(name){ %> <li><%= name %></li> <% }) %> </ul> <% } %> </script> <script> onload = function () {var user = document.getElementById ('user'). InnerHtml; var names = ['loki', 'tobi', 'jane']; var html = ejs.render (Benutzer, {Namen: Namen}); document.body.innerhtml = html; } </script> </head> <body> </body> </html> Ich frage mich, ob EJs mehrschichtige JSON-Objekte ausgeben können.Übrigens enthüllten einige Internetnutzer, dass JQ Master John vor einigen Jahren eine 20-Zeilen-Vorlage geschrieben hat, die sich schäumet, ähnlich wie EJS, aber kurz und prägnant!
Einfache und praktische JS -Template -Engine
Eine JS -Template -Engine mit weniger als 50 Zeilen unterstützt verschiedene JS -Syntax:
<script id = "test_list" type = "text/html"> <%= für (var i = 0, l = p.list.length; i <l; i ++) {var stu = p.list [i]; =%> <tr> <td <%= if (i == 0) {=%> <%=} =%>> <%== stu.name =%> </td> <td> <%== STU.AGE =%> </td> <td> <%=%= SCRIDT |"<%= xxx =%>" ist der JS -Logikcode, und "<%== xxx =%>" ist die direkte Ausgangsvariable, ähnlich der Funktion von Echo in PHP. "P" ist der KV -Objektparameter beim Aufrufen der folgenden Build -Methode. Es kann auch auf einen anderen Parameternamen eingestellt werden, wenn "New JTemp" aufgerufen wird
Angerufen:
$ (function () {var temp = new jTemp ('test_list'), html = temp.build ({list: [{name: 'zhang san', Alter: 13, Adresse: 'peking'}, {name: 'li si', Alter: 17, Adresse: 'tianjin'}, {name: 'wang wu', ast: ass: ass:}), {{{name: {wang wu ', ass age: ass: ass: ass:}, {}, {{{name:' wang wu ', ass age: $ ('Tabelle'). HTML (HTML);Nachdem die obige Temperatur erzeugt wurde, kann die Build -Methode mehrmals aufgerufen werden, um HTML zu generieren. Hier ist der Code für die Template Engine:
var jtemp = function () {function temp (htmlid, p) {p = p || {}; // Konfigurationsinformationen in den meisten Fällen this.htmlid = htmlid; this.fun; this.oname = p.oname || 'P'; this.temp_s = p.Temps || '<%='; this.temp_e = p.Tempe || '=%>'; this.getfun (); } Temp.prototype = {getfun: function () {var _ = this, str = $ ('#' + _.htmlid) .html (); if (! str) _.err ('Fehler: keine Temperatur !!'); var str_ = 'var' + _.oname + '= this, f =/'/';', s = str.Indexof (_. temp_s), e = -1, p, sl = _.temp_sgth, el = _.temp_e.length; for (; s> = 0;) {e = str.Indexof (_. temp_e); if (e <s) alert (':( Fehler !!'); str_ += 'f +=/' ' +str.Substring (0, s) +'/';; P.Substring (1) + '; Funktion (fs);Der Kern besteht darin, den Vorlagencode in eine Funktion umzuwandeln, die Strings spleißt, und jedes Mal, wenn Sie die Datenaufruffunktion übernehmen.
Da es hauptsächlich für Mobiltelefone (Webkits) verwendet wird, wird die Effizienz des Stringspleißens nicht berücksichtigt. Wenn es von IE verwendet werden muss, ändern Sie am besten die String -Spleißmethode in die Form von Array.push ().
EJS -Vorlagenlayout Layout
1. Wenn Sie nicht bereit sind, das Standard -Layout zu verwenden, können Sie es selbst angeben. Zum Beispiel:
res.render ("index", {"title": "test", "layout": "main"}); // oder res.render ("index", {"title": "test", "layout": "main.ejs"});2. Wenn Sie nicht bereit sind, Layout zu verwenden, können Sie das Layout beispielsweise auf False einstellen:
res.render ("index", {"layout": false});3. Wenn Sie nicht möchten, dass jede Anfrage separat festgelegt wird. Globale Einstellungen können verwendet werden:
app.set ("Optionen anzeigen", {"Layout": false});4. In EJs beträgt das Standard -Schließ -Tag < % .. %> und wir können auch unsere eigenen Tags definieren. Zum Beispiel:
app.set ("Optionen anzeigen", {"Öffnen": "{{", "Close": "}}"});5. Lokales Layout
In Webanwendungen muss häufig wiederholt einen bestimmten Inhalt angezeigt werden, z. B. die Funktion der Benutzerkommentar, für die die wiederholte Anzeige des Kommentars jedes Benutzers erforderlich ist. Zu diesem Zeitpunkt können wir es durch Schleifen erreichen. Es kann jedoch auch mit [Teilvorlage] (teilweise) implementiert werden. Zum Beispiel:
Zunächst erstellen wir eine lokale Vorlage./Views/Comment.ejs:
<div> <div> <%= comment.user%> </div> <%= comment.content%> </div> </div>
Hinweis: Hier ist comment.xxxx
Dann in ./views/index.ejs, rufen Sie einen Kommentar über teilweise an
Dies ist <%= Titel%>! <br/> <%- partiell ("Kommentar", Kommentare)%>Hinweis: Hier ist teilweise ("comment.ejs", Kommentare); <- Das Wort sollte plural sein.
Schließlich im Router Call Index.ejs.
app.get ("/", function (req, res) {res.render ("index", {"title": "test", "layout": false, "Kommentare": [{"user": "gainover", "content": "test1"}, {"user": "zongzi ]});Hinweis: Die Kommentare im Code entsprechen den Kommentaren variabler Name von index.ejs und in comment.ejs, die von partial genannt werden, wird die einzigartige Form des Kommentars verwendet.
Wenn Listen angezeigt werden, wird das Szenario, dem wir normalerweise begegnen, das erste Element oder das letzte Element speziell angezeigt. Zum Teil können wir die integrierten Variablen in Express verwenden, um festzustellen, ob das aktuelle Objekt das erste Element oder das letzte Element ist, zum Beispiel:
<div> <div> <%= comment.user%> </div>: <div> <%= comment.content%> </div> </div>
Auf diese Weise wird es in der Klasse des ersten Kommentars ein zusätzliches Firstitem geben.
Ähnliche integrierte Variablen umfassen:
(1) FirstInCollection ist wahr, wenn es das erste Element des Arrays ist
(2) IndexInCollektion Der Index des aktuellen Elements im Array
(3) Lastincollection ist wahr, wenn es das letzte Element des Arrays ist
(4) CollectionLength
Schließlich gibt es das Problem der Pfadsuche, wenn teilweise die Vorlage aufgerufen wird:
(1) partial ("bearbeiten") sucht in der selben Verzeichnis nach Edit.ejs -Datei.
(2) partial ("../ meldung") sucht nach der message.ejs -Datei des vorherigen Ebenenverzeichnisses.
(3) Partial ("Benutzer") sucht nach user.ejs -Datei. Wenn user.ejs nicht existiert, wird die Datei /users/index.ejs -Datei durchsucht.
(4) < %= Benutzer %> entkommen dem Inhalt. Wenn Sie ihm entkommen möchten, können Sie < %- Benutzer %> verwenden