EJS
Modelos de JavaScript incorporados
Instalación
1$ npm install ejs
características
- Controlar o fluxo con
<% %>
- Saída
<%= %>
escapada con (función de escape configurable) - Saída bruta sen escapar con
<%- %>
- Modo de recorte de nova liña ('newline slurping') con
-%>
etiqueta final - Modo de recorte de espazos en branco (borra todo o espazo en branco) para controlar o fluxo
<%_ _%>
- Delimitadores personalizados (por exemplo, usar
<? ?>
no canto de<% %>
) - Inclúe
- Asistencia do cliente
- Almacenamento en caché estático de JavaScript intermedio
- Almacenamento en caché estático de modelos
- Cumpre co sistema de visualización Express
Exemplo
1
2
3<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
Proba EJS en liña en: https://ionicabizau.github.io/ejs-playground/ .
Uso
1
2
3
4
5
6
7
8
9
10let template = ejs.compile(str, options);
template(data);
// => Rendered HTML string
ejs.render(str, data, options);
// => Rendered HTML string
ejs.renderFile(filename, data, options, function(err, str){
// str => Rendered HTML string
});
Tamén é posible usar ejs.render(dataAndOptions);
onde se pasa todo nun só obxecto. Nese caso, acabarás con variables locais para todas as opcións pasadas. Non obstante, teña en conta que o seu código podería romper se engadimos unha opción co mesmo. nome como unha das propiedades do obxecto de datos. Polo tanto, non recomendamos usar este atallo.
Opcións
cache
As funcións compiladas están na caché, requirefilename
filename
O nome do ficheiro que se está a renderizar. Non é necesario se o está a usarrenderFile()
. Usado porcache
para teclear cachés e para inclúe.root
Establecer raíz do proxecto para inclúe cun camiño absoluto (/file.ejs).context
Contexto de execución de funciónscompileDebug
Candofalse
non se compila ningunha instrumentación de depuraciónclient
Candotrue
compila unha función que se pode renderizar no navegador sen necesidade de cargar o tempo de execución de EJS ( ejs.min.js ).delimiter
Carácter para usar con parénteses angulares para abrir / pechardebug
Corpo de función xerada por saídastrict
Cando se define comotrue
, a función xerada está en modo estrito_with
Se se utilizan ou nonwith() {}
construcións. Sefalse
entón os habitantes locais gardaranse nolocals
obxecto. Configúrasefalse
en modo estrito.localsName
Nome que se usará para o obxecto que almacena variables locais cando non se usawith
Predeterminado paralocals
rmWhitespace
Elimina todos os espazos en branco seguros para eliminar, incluídos os espazos en branco-%>
inicial e final. Tamén permite unha versión máis segura do slurping de liña para todas as etiquetas de scriptlet (non tira novas liñas de etiquetas no medio dunha liña).escape
A función de escape empregada con<%=
construct. Utilízase na representación e.toString()
edítase na xeración de funcións de cliente. (Por defecto, escápase de XML).outputFunctionName
Estableza unha cadea (por exemplo, "eco" ou "imprimir") para que unha función imprima saída dentro de etiquetas de scriptlet.
Este proxecto usa JSDoc . Para obter a documentación completa da API pública, clonar o repositorio e executalo npm run doc
. Isto executará JSDoc coas opcións axeitadas e sairá a documentación out/
. Se queres os documentos da API pública e privada, executa npm run devdoc
no seu lugar.
Etiquetas
<%
Etiqueta "Scriptlet", para control de fluxo, sen saída<%_
Etiqueta de scriptlet "Espazo en branco", elimina todo o espazo en branco antes que el<%=
Emite o valor no modelo (escapado)<%-
Emite o valor sen fuxir no modelo<%#
Etiqueta de comentario, sen execución, sen saída<%%
Emite un literal "<%"%%>
Produce un literal "%>"%>
Etiqueta de final sinxela-%>
Etiqueta de modo de recorte ('newline slurp'), recortes seguindo a nova liña_%>
Etiqueta de finalización "Espazo en branco", elimina todos os espazos en branco despois
Para ver a documentación completa da sintaxe, consulte docs/syntax.md.
Inclúe
Inclúe quere ter de ser unha ruta absoluta, ou, se non, asumen-se como en relación ao modelo co include
chamada. Por exemplo, se está incluíndo ./views/user/show.ejs
de ./views/users.ejs
usaría <%- include('user/show') %>
.
Debe especificar a filename
opción para o modelo coa include
chamada a menos que estea a usar renderFile()
.
É probable que queiras usar a etiqueta de saída en bruto ( <%-
) coa túa inclusión para evitar que escape dúas veces a saída HTML.
1
2
3
4
5<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}) %>
<% }); %>
</ul>
As inclusións insírense no tempo de execución, de xeito que podes usar variables para o camiño da
include
chamada (por exemplo <%- include(somePath) %>
). As variables do teu obxecto de datos de nivel superior están dispoñibles para todas as túas incluídas, pero hai que transmitir as variables locais.
NOTA: <% include user/show %>
aínda se admiten as directivas de preprocesador ( ).
Delimitadores personalizados
Os delimitadores personalizados pódense aplicar por modelo ou de forma global:
1
2
3
4
5
6
7
8
9
10
11let ejs = require('ejs'),
users = ['geddy', 'neil', 'alex'];
// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});
// => 'geddy | neil | alex'
// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'
Caché
EJS inclúe unha caché básica no proceso para almacenar en caché as funcións intermedias de JavaScript empregadas para renderizar modelos. É fácil conectar a caché LRU mediante a lru-cache
biblioteca de Node :
1
2
3let ejs = require('ejs'),
LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit
Se queres borrar a caché EJS, chama ejs.clearCache
. Se estás a usar a caché LRU e necesitas un límite diferente, restablece ejs.cache
a unha nova instancia da LRU.
Cargador de ficheiros personalizado
O cargador de ficheiros predeterminado é fs.readFileSync
, se queres personalizalo, podes configurar ejs.fileLoader.
1
2
3
4
5
6let ejs = require('ejs');
let myFileLoad = function (filePath) {
return 'myFileLoad: ' + fs.readFileSync(filePath);
};
ejs.fileLoader = myFileLoad;
Con esta función, pode preprocesar o modelo antes de lelo.
Deseños
EJS non admite bloques específicamente, pero os deseños pódense implementar incluíndo cabeceiras e pés de páxina, así:
1
2
3
4
5
6
7
8<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer') -%>
Asistencia do cliente
Vai á última versión , descarga
./ejs.js
ou ./ejs.min.js
. Alternativamente, podes compilala ti mesmo clonando o repositorio e executando jake build
(ou $(npm bin)/jake build
se jake non está instalado globalmente).
Inclúa un destes ficheiros na túa páxina e ejs
debería estar dispoñible en todo o mundo.
Example
1
2
3
4
5
6
7
8
9
10<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people});
// With jQuery:
$('#output').html(html);
// Vanilla JS:
document.getElementById('output').innerHTML = html;
</script>
Caveats
A maioría de EJS funcionará como se esperaba; con todo, hai algunhas cousas a destacar:
- Obviously, xa que non ten acceso ao sistema de ficheiros,
ejs.renderFile()
non funcionará. Pola mesma razón,
include
s non funcionan a non ser que use uninclude callback
. Aquí tes un exemplo:1 2 3 4 5 6 7 8 9let str = "Hello <%= include('file', {person: 'John'}); %>", fn = ejs.compile(str, {client: true}); fn(data, null, function(path, d){ // include callback // path -> 'file' // d -> {person: 'John'} // Put your code here // Return the contents of file as a string }); // returns rendered string
IDE Integration with Syntax Highlighting
VSCode: Javascript EJS por DigitalBrainstem
Proxectos relacionados
Hai unha serie de implementacións de EJS:
- A implementación de TJ, a v1 desta biblioteca: https://github.com/tj/ejs
- EJS de Jupiter Consulting: http://www.embeddedjs.com/
- EJS Embedded JavaScript Framework en Google Code: https://code.google.com/p/embeddedjavascript/
- Implementación de Ruby de Sam Stephenson: https://rubygems.org/gems/ejs
- Erubis, unha implementación ERB que tamén executa JavaScript: http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
- Soporte de linguaxe DigitalBrainstem EJS: https://github.com/Digitalbrainstem/ejs-grammar
Licenza
Licenza baixo a licenza Apache, versión 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )
Modelos de JavaScript incorporados EJS copyright 2112 mde@fleegix.org .