Hay muchas opciones para las plantillas de código abierto de nodos, pero se recomienda que las personas mayores como yo usen EJS. Es natural usar EJS con experiencia en ASP/PHP/JSP clásico. Es decir, puede organizar el código JavaScript en el bloque <%...%> bloque y usar <%= salida variable%> de la manera más tradicional (además, <%-Las variables de salida no escapará de símbolos como &). El comando de instalación de EJS es el siguiente:
NPM Instalar EJS
Llamada de JS
Hay dos métodos principales llamados por JS:
EJS.Compile (STR, Opciones); // => función ejs.render (str, opciones); // => str
De hecho, EJS se puede usar independientemente de Express, por ejemplo:
var eJS = request (''), str = require ('fs'). readFilesync (__ dirname + '/list.ejs', 'utf8'); var ret = ejs.render (str, {nombres: ['foo', 'bar', 'baz']}); console.log (ret); Ver EJS.Render (). El primer parámetro es la cadena de la plantilla, y la plantilla es la siguiente. < %if (names.length) { %> <ul> < %names.forEach (function (name) { %> <li foo = '< %= name + "'" %> '> < %= name %> </li> < %}) %> </ul> < %} %>Los nombres se convierten en variables locales.
Parámetros de opción
El segundo parámetro son los datos, que suelen ser un objeto. Este objeto puede considerarse como una opción, lo que significa que los datos y la selección están en el mismo objeto.
Si no desea tener discos cada vez, debe almacenar en caché la plantilla y establecer opciones. Por ejemplo:
var eJS = require ('../'), fs = require ('fs'), path = __Dirname + '/functions.ejs', str = fs.ReadFilesync (ruta, 'utf8'); var users = []; Users.push ({name: 'tobi', edad: 2, especies: 'ferret'}) uss.push ({name: 'loki', edad: 2, especies: 'ferret'}) uss.push ({name: 'jane', edad: 6, especies: 'ferret'}) var ret = eJs.render (str, {ussers: ussers, ussers, usser}; console.log (ret);comando inculde
Y, si quieres
<ul> < % users.Foreach (función (usuario) { %> < % incluye user/show %> < %}) %> </ul>En general, insertar una plantilla común, es decir, introducir un archivo, debe establecer la opción del nombre de archivo para iniciar la función de incluir, de lo contrario, incluir no conocerá el directorio donde se encuentra.
plantilla:
<h1> usuarios </h1> < %user de la función (usuario) { %> <li> <strong> < %= user.name %> </strong> es un < %= user.age %> año de edad < %= user.species %>. </li> < %} %> <ul> < %users.map (user) %> </ul>EJS admite plantillas de compilación. Después de la compilación de plantilla, no hay operación IO, será muy rápido y se puede usar para variables locales. El siguiente ejemplo de usuario/show ignora la extensión de EJS:
<ul> < % users.Foreach (función (usuario) { %> < % incluye user/show %> < %}) %> </ul>Token cerrado personalizado
Si planea usar <h1> {{= title}} </h1> generalmente no-<%%> etiqueta, también puede personalizarla.
var eJS = require ('EJS'); ejs.open = '{{'; ejs.close = '}}'; La salida de formato también está bien. ejs.filters.last = function (obj) {return obj [obj.length - 1]; }; Llamado:<p> <%=: usuarios | último %> </p>EJS también admite entornos de navegador.
<html> <fead> <script src = "../ ejs.js"> </script> <script id = "ussers" type = "text/template"> < %if (names.length) { %> <ul> < %names.forEach (function (name) { %> <li> < %= name %> </li> < %}) %> </ul> < %} %> </script> function () {var users = document.getElementById ('usuarios'). innerhtml; var nombres = ['loki', 'tobi', 'jane']; var html = ejs.render (usuarios, {nombres: nombres}); document.body.innerhtml = html; } </script> </head> <body> </body> </html> Me pregunto si EJS puede generar objetos JSON de múltiples capas.Por cierto, algunos internautas revelaron que JQ Master John escribió una plantilla de 20 líneas hace varios años, que se avergüenza, similar a EJS pero breve y concisa.
Motor de plantilla JS simple y práctico
Un motor de plantilla JS con menos de 50 líneas admite varias sintaxis JS:
<script id = "test_list" type = "text/html"> <%= for (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> <%== (stu.address || '') =%> </td> <tr> <%=}"<%= xxx =%>" es el código lógico JS, y "<%== xxx =%>" es la variable de salida directa, similar a la función de ECHO en PHP. "P" es el parámetro del objeto KV al llamar al siguiente método de compilación. También se puede configurar en otro nombre de parámetro al llamar a "nuevo JTemp"
Llamado:
$ (function () {var temp = new JTemp ('test_list'), html = temp.build ({list: [{name: 'zhang san', edad: 13, dirección: 'beijing'}, {nombre: 'li si', edad: 17, dirección: 'tianjin'}, {name: wang wu ', edad: 13}); $ ('tabla'). html (html);Después de generar la temperatura anterior, el método de compilación se puede llamar varias veces para generar HTML. Aquí está el código para el motor de plantilla:
var jtemp = function () {function temp (htmlid, p) {p = p || {}; // información de configuración, en la mayoría de los casos, this.htmlid = htmlid; this.fun; this.Oname = P.Oname || 'pag'; this.temp_s = p.temps || '<%='; this.temp_e = p.tempe || '=%>'; this.getFun (); } Temp.prototype = {getFun: function () {var _ = this, str = $ ('#' + _.htmlid) .html (); if (! str) _.err ('Error: ¡sin temp!'); var str_ = 'var' + _.oname + '= this, f =/'/';', s = str.indexof (_. temp_s), e = -1, p, sl = _.temp_s.length, el = _.temp_e.length; for (; s> = 0;) {e = str.indexof (_. temp_e); if (e <s) alert (':( error !!'); str_ += 'f +=/' ' +str.substring (0, s) +'/';'; p = _.trim (str.substring (s +sl, e)); if (p.indexf ('=' ')! == 0) {// js str_ += p;} más {// P.SubString (1) + ';'; Funciones (fs);El núcleo es convertir el código de plantilla en una función que empalme cadenas, y cada vez que toma la función de llamada de datos.
Debido a que se usa principalmente para teléfonos móviles (WebKits), no se considera la eficiencia del empalme de cadenas. Si necesita ser utilizado por IE, es mejor cambiar el método de empalme de cadena a la forma de array.push ().
Diseño de diseño de plantilla de EJS
1. Si no está dispuesto a usar el diseño predeterminado.egs, puede especificarlo usted mismo. Por ejemplo:
res.render ("index", {"título": "Test", "Layout": "Main"}); // o res.render ("index", {"título": "Test", "Layout": "Main.ejs"});2. Si no está dispuesto a usar el diseño, puede establecer el diseño en falso, por ejemplo:
res.render ("índice", {"diseño": falso});3. Si no desea que cada solicitud se establezca por separado. Se pueden utilizar la configuración global:
app.set ("Ver opciones", {"Diseño": falso});4. En EJS, la etiqueta de cierre predeterminada es < % .. %>, y también podemos definir nuestras propias etiquetas. Por ejemplo:
app.set ("Ver opciones", {"abrir": "{{", "cerrar": "}}"});5. Diseño local
En las aplicaciones web, a menudo es necesario mostrar repetidamente un determinado contenido, como la función de comentarios del usuario, que requiere la visualización repetida del comentario de cada usuario. En este momento, podemos lograrlo a través de bucles. Sin embargo, también se puede implementar utilizando [plantilla parcial] (parcial). Por ejemplo:
Primero, creamos una plantilla local./views/comment.ejs:
<Div> <Viv> <%= comment.user%> </div> <div> <%= comment.content%> </div> </div>
Nota: Aquí está el comentario.xxxx
Luego en ./views/index.ejs, llame al comentario a través de parcial
Este es <%= título%>! <br/> <%- parcial ("comentario", comentarios)%>Nota: Aquí está parcial ("comentario.ejs", comentarios); <- La palabra debe ser plural.
Finalmente, en el enrutador, llame a index.ejs.
app.get("/",function(req,res){ res.render("index",{"title":"test","layout":false,"comments":[ {"user":"gainover","content":"test1"}, {"user":"zongzi","content":"test2"}, {"user":"maomao","content":"test3"} ]});Nota: Los comentarios en el código son los mismos que el nombre de la variable de comentarios de index.egs, y en comentarios.
Cuando se muestran listas, el escenario que generalmente encontramos es mostrar el primer elemento o el último elemento especialmente. En parte, podemos usar las variables incorporadas en express para determinar si el objeto actual es el primer elemento o el último elemento, por ejemplo:
<Div> <Viv> <%= comment.user%> </div>: <div> <%= comment.content%> </div> </div>
De esta manera, habrá un FirstItem adicional en la clase del primer comentario.
Las variables integradas similares incluyen:
(1) La primera incrustación es verdadera si es el primer elemento de la matriz
(2) Indexincollection El índice del elemento actual en la matriz
(3) LastInincollection es verdadera si es el último elemento de la matriz
(4) CollectionLength
Finalmente, existe el problema de búsqueda de ruta cuando parcial llama a la plantilla:
(1) Parcial ("Editar") buscará el archivo edit.eJS en el mismo directorio.
(2) Parcial ("../ Mensaje") buscará el archivo Message.Ejs del directorio de nivel anterior.
(3) Parcial ("usuarios") buscará el archivo usser.eJS. Si Usss.EJS no existe, se buscará el archivo /users/index.ejs.
(4) < %= usuarios %> escapará del contenido. Si desea escapar, puede usar < %- usuarios %>