Existem muitas opções para modelos de código aberto do Node, mas é recomendável que idosos como eu usem EJs. É natural usar EJs com experiência em ASP/PHP/JSP clássico. Ou seja, você pode organizar o código JavaScript no bloqueio <%...%> e usar <%= variável de saída%> da maneira mais tradicional (além, <%-variáveis de saída não escaparão de símbolos como &). O comando de instalação do EJS é o seguinte:
NPM Instale EJS
JS ligue
Existem dois métodos principais chamados por JS:
ejs.compile (str, opções); // => função ejs.render (str, opções); // => str
De fato, os EJs podem ser usados independentemente do Express, por exemplo:
var ejs = requer (''), str = requer ('fs'). readfilesync (__ dirname + '/list.ejs', 'utf8'); var ret = ejs.render (str, {nomes: ['foo', 'bar', 'baz']}); console.log (ret); Veja EJS.Render (). O primeiro parâmetro é a sequência do modelo e o modelo é o seguinte. < %if (names.length) { %> <ul> < %names.foreach (function (nome) { %> <li foo = '< %= nome + "'" %> '> < %= name %> </li> < %}) %</ul> < %} %>Os nomes se tornam variáveis locais.
Parâmetros de opção
O segundo parâmetro são os dados, que geralmente são um objeto. Esse objeto pode ser considerado uma opção, o que significa que os dados e a seleção estão no mesmo objeto.
Se você não quiser ter discos sempre, precisa armazenar em cache o modelo e definir opções.filename. Por exemplo:
var ejs = requim ('../'), fs = requer ('fs'), caminho = __dirname + '/functions.ejs', str = fs.readfilesync (path, 'utf8'); var usuários = []; usuários.push ({name: 'Tobi', idade: 2, espécies: 'Ferret'}) usuários.push ({name: 'loki', idade: 2, espécies: 'ferret'}) usuários.push ({name: 'Jane', idade: 6, espécies: 'Ferret'}) var = ejs.Render console.log (ret);comando inculde
E, se você quiser
<ul> < % users.foreach (function (user) { %> < % inclui usuário/show %> < %}) %> </ul>Geralmente, inserindo um modelo comum, ou seja, introduzindo um arquivo, você deve definir a opção de nome do arquivo para iniciar o recurso de incluir, caso contrário, incluirá o diretório onde ele está localizado.
modelo:
<H1> Usuários </h1> < %função usuário (usuário) { %> <li> <strong> < %= user.name %> </strong> é um < %= user.age %> ano < %= user.species %>.EJS suporta modelos de compilação. Após a compilação do modelo, não há operação de IO, ela será muito rápida e pode ser usada para variáveis locais. O exemplo a seguir, usuário/show ignora a extensão EJS:
<ul> < % users.foreach (function (user) { %> < % inclui usuário/show %> < %}) %> </ul>Token Custom próximo
Se você planeja usar <h1> {{= title}} </h1> geralmente não-<%%>, você também pode personalizá-la.
var ejs = requer ('ejs'); ejs.open = '{{'; ejs.close = '}}'; A saída de formato também está ok. ejs.filters.last = function (obj) {return obj [obj.length - 1]; }; Chamado:<p> <%=: usuários | Último %> </p>O EJS também suporta ambientes de navegador.
<html> <head> <script src = "../ ejs.js"> </script> <script id = "usuários" type = "text/modelo"> < %se (names.length) { %> <ul> < %names.foreach (function (name) {%> <li> <li> <li) <lemp) <sp. onLoad = function () {var users = document.getElementById ('usuários'). innerhtml; var nomes = ['Loki', 'Tobi', 'Jane']; var html = ejs.render (usuários, {nomes: nomes}); document.body.innerhtml = html; } </script> </ad Head> <body> </body> </html> Gostaria de saber se os EJs podem gerar objetos JSON de várias camadas?A propósito, alguns internautas revelaram que o mestre do JQ John escreveu um modelo de 20 linhas há vários anos, que é envergonhado, semelhante ao EJS, mas curto e conciso!
Engine de modelo JS simples e prático
Um mecanismo de modelo JS com menos de 50 linhas suporta várias sintaxe 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.addressLeS |'Am%>%>"<%= xxx =%>" é o código lógico JS e "<%== xxx =%>" é a variável de saída direta, semelhante à função do eco no PHP. "P" é o parâmetro de objeto KV ao chamar o seguinte método de construção. Também pode ser definido como outro nome de parâmetro ao chamar "New JTemp"
Chamado:
$(function(){ var temp = new JTemp('test_list'), html = temp.build( {list:[ {name:'Zhang San', age:13, address:'Beijing'}, {name:'Li Si', age:17, address:'Tianjin'}, {name:'Wang Wu', age:13} ]}); $ ('tabela'). html (html);Depois que a temperatura acima é gerada, o método de construção pode ser chamado várias vezes para gerar HTML. Aqui está o código do mecanismo de modelo:
var jTemp = function () {função temp (htmlid, p) {p = p || {}; // Informações de configuração, na maioria dos casos, 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 ('erro: sem temp !!'); var str_ = 'var' + _.oname + '= this, f =/'/';', s = str.indexOf (_. temp_s), e = -1, p, sl = _.temp_s.length, el = _.temp_e.length; para (; s> = 0;) {e = str.indexOf (_. temp_e); if (e <s) alerta (':( erro !!'); str_ += 'f +=/' ' +str.substring (0, s) +'/';'; p = _.trim (str.substring (s +sl, e); if (p.indexof ('=')! P.Substring (1) + ';'; }, construir: função (P) {Retorne this.fun.call (P);O núcleo é converter o código do modelo em uma função que emaranha strings e cada vez que você pega a função de chamada de dados.
Como é usado principalmente para telefones celulares (webkits), a eficiência do splicing de cordas não é considerada. Se precisar ser usado pelo IE, é melhor alterar o método de splicing de string para a forma de Array.push ().
layout do modelo EJS Layout
1. Se você não estiver disposto a usar o layout padrão. Por exemplo:
res.render ("index", {"title": "test", "layout": "main"}); // ou res.render ("index", {"title": "test", "layout": "main.ejs"});2. Se você não estiver disposto a usar o layout, poderá definir o layout como false, por exemplo:
res.render ("index", {"layout": false});3. Se você não deseja que cada solicitação seja definida separadamente. As configurações globais podem ser usadas:
App.set ("View Options", {"layout": false});4. Em EJs, a tag de fechamento padrão é < % .. %>, e também podemos definir nossas próprias tags. Por exemplo:
App.Set ("View Options", {"Open": "{{", "Close": "}}"});5. Layout local
Nos aplicativos da Web, geralmente é necessário exibir repetidamente um determinado conteúdo, como a função de comentário do usuário, que requer a exibição repetida do comentário de cada usuário. Neste momento, podemos alcançá -lo através de loops. No entanto, ele também pode ser implementado usando [modelo parcial] (parcial). Por exemplo:
Primeiro, criamos um modelo local./views/comment.ejs:
<div> <div> <%= comentário.user%> </div> <div> <%= comentário.content%> </div> </div>
NOTA: Aqui está o comentário.xxxx
Em.
Este é <%= title%>! <br/> <%- parcial ("comentário", comentários)%>Nota: Aqui está parcial ("Comment.ejs", comentários); <- A palavra deve ser plural.
Finalmente, no roteador, ligue para index.ejs.
App.get ("/", function (req, res) {res.render ("index", {"title": "test", "layout": false, "comentários": [{"user": "gavão", "content": "test1"}, {"user": "zongzi", "content": "test2"}, {"user": "zongzi", "" content2 "; ]});Nota: Os comentários no código são os mesmos que o nome da variável de comentários do index.ejs e, em comentários.
Quando as listas são exibidas, o cenário que geralmente encontramos é exibir o primeiro elemento ou o último elemento especialmente. Em parte, podemos usar as variáveis internas no Express para determinar se o objeto atual é o primeiro elemento ou o último elemento, por exemplo:
<div> <div> <%= comentário.user%> </div>: <div> <%= comentário.content%> </div> </div>
Dessa forma, haverá um primeiro título extra na classe do primeiro comentário.
Variáveis incorporadas semelhantes incluem:
(1) Firstincollection é verdadeiro se for o primeiro elemento da matriz
(2) indexincollection o índice do elemento atual na matriz
(3) Livencollection é verdadeiro se for o último elemento da matriz
(4) CollectionLength
Finalmente, existe o problema de pesquisa de caminho quando parcial chama o modelo:
(1) Parcial ("Editar") procurará o arquivo edit.ejs no mesmo diretório.
(2) Parcial ("../ mensagem") procurará o arquivo message.ejs do diretório de nível anterior.
(3) Parcial ("Usuários") procurará o arquivo usuários.ejs. Se o users.ejs não existir, o arquivo /Users/Index.EJS será pesquisado.
(4) < %= usuários %> escapará do conteúdo. Se você quiser escapar, pode usar < %- usuários %>