EJS

Plantillas de JavaScript integradas

Instalación

1$ npm install ejs

Características

Controlar el flujo con<% %>
Salida de escape con <%= %>(función de escape configurable)
Salida bruta sin escape con<%- %>
Modo de recorte de nueva línea ('sorber nueva línea') con -%>etiqueta final
Modo de recorte de espacios en blanco (sorbe todos los espacios en blanco) para controlar el flujo con<%_ _%>
Delimitadores personalizados (por ejemplo, usar <? ?>en lugar de <% %>)
Incluye
Soporte del lado del cliente
Almacenamiento en caché estático de JavaScript intermedio
Almacenamiento en caché estático de plantillas
Cumple con el sistema de vista Express

Ejemplo

1
2
3
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

Pruebe EJS en línea en: https://ionicabizau.github.io/ejs-playground/ .

Uso

1
2
3
4
5
6
7
8
9
10
let 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
});

También es posible usar ejs.render(dataAndOptions);donde pasas todo en un solo objeto. En ese caso, terminarás con variables locales para todas las opciones pasadas. Sin embargo, ten en cuenta que tu código podría fallar si agregamos una opción con el mismo name como una de las propiedades de su objeto de datos. Por lo tanto, no recomendamos utilizar este acceso directo.

Opciones

cache Las funciones compiladas se almacenan en caché, lo que requierefilename
filename El nombre del archivo que se está procesando. No es necesario si estás usando renderFile(). Usado por cachepara claves de cachés y para inclusiones.
root Establezca la raíz del proyecto para inclusiones con una ruta absoluta (/file.ejs).
context Contexto de ejecución de funciones
compileDebug Cuando falseno se compila ninguna instrumentación de depuración
client Cuando true, compila una función que se puede representar en el navegador sin necesidad de cargar EJS Runtime ( ejs.min.js ).
delimiter Carácter a utilizar con corchetes angulares para abrir/cerrar
debug Cuerpo de función generado por salida
strict Cuando se establece en true, la función generada está en modo estricto
_with Si se usan o no with() {}construcciones. En falseese caso, las locales se almacenarán en el localsobjeto. Establezca falseen modo estricto.
localsName Nombre a usar para el objeto que almacena variables locales cuando no se usan withValores predeterminados paralocals
rmWhitespace Elimina todos los espacios en blanco seguros de eliminar, incluidos los espacios en blanco iniciales y finales. También habilita una versión más segura de -%>extracción de líneas para todas las etiquetas scriptlet (no elimina nuevas líneas de etiquetas en el medio de una línea).
escape La función de escape utilizada con <%=la construcción. Se utiliza en el renderizado y se .toString()edita en la generación de funciones de cliente (de forma predeterminada, escapa XML).
outputFunctionName Establezca una cadena (por ejemplo, 'echo' o 'print') para que una función imprima la salida dentro de las etiquetas scriptlet.

Este proyecto utiliza JSDoc . Para obtener la documentación completa de la API pública, clona el repositorio y ejecuta npm run doc. Esto ejecutará JSDoc con las opciones adecuadas y generará la documentación en out/. Si deseas los documentos de la API pública y privada, ejecútalos npm run devdocen su lugar.

Incluye

Incluye tiene que ser una ruta absoluta o, en caso contrario, se supone que es relativa a la plantilla con la includellamada. Por ejemplo, si incluye ./views/user/show.ejsdesde, ./views/users.ejsusaría <%- include('user/show') %>.

Debe especificar la filenameopción para la plantilla con la include llamada a menos que esté utilizando renderFile().

Probablemente querrás utilizar la etiqueta de salida sin formato ( <%-) con tu inclusión para evitar el doble escape de la salida HTML.

1
2
3
4
5
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}) %>
  <% }); %>
</ul>

Las inclusiones se insertan en tiempo de ejecución, por lo que puede usar variables para la ruta en la includellamada (por ejemplo <%- include(somePath) %>). Las variables en su objeto de datos de nivel superior están disponibles para todas sus inclusiones, pero las variables locales deben transmitirse.

NOTA: <% include user/show %>Aún se admiten las directivas de inclusión de preprocesador ( ).

Delimitadores personalizados

Los delimitadores personalizados se pueden aplicar por plantilla o globalmente:

1
2
3
4
5
6
7
8
9
10
11
let 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'

Almacenamiento en caché

EJS viene con un caché básico en proceso para almacenar en caché las funciones intermedias de JavaScript utilizadas para representar plantillas. Es fácil conectar el almacenamiento en caché LRU usando la lru-cachebiblioteca de Node:

1
2
3
let ejs = require('ejs'),
    LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit

Si desea borrar el caché de EJS, llame a ejs.clearCacheSi está utilizando el caché de LRU y necesita un límite diferente, simplemente restablezca ejs.cachea una nueva instancia de LRU.

Cargador de archivos personalizado

El cargador de archivos predeterminado es fs.readFileSync, si desea personalizarlo, puede configurar ejs.fileLoader.

1
2
3
4
5
6
let ejs = require('ejs');
let myFileLoad = function (filePath) {
  return 'myFileLoad: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoad;

Con esta función, puede preprocesar la plantilla antes de leerla.

Diseños

EJS no admite bloques específicamente, pero se pueden implementar diseños incluyendo encabezados y pies de página, así:

1
2
3
4
5
6
7
8
<%- include('header') -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer') -%>

Soporte del lado del cliente

Vaya a la última versión , descárguela ./ejs.jso ./ejs.min.jsalternativamente, puede compilarla usted mismo clonando el repositorio y ejecutándola jake build(o $(npm bin)/jake buildsi Jake no está instalado globalmente).

Incluya uno de estos archivos en su página y ejsdebería estar disponible en todo el 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

La mayor parte de EJS funcionará según lo esperado; sin embargo, hay algunas cosas a tener en cuenta:

Obviously, dado que no tiene acceso al sistema de archivos, ejs.renderFile()no funcionará.

Por la misma razón, includelos s no funcionan a menos que uses un include callback. Aquí tienes un ejemplo:

1
2
3
4
5
6
7
8
9
let 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 de DigitalBrainstem

Hay varias implementaciones de EJS:

Implementación de TJ, la v1 de esta biblioteca: https://github.com/tj/ejs
EJS de Jupiter Consulting: http://www.embeddedjs.com/
Marco JavaScript integrado EJS en Google Code: https://code.google.com/p/embeddedjavascript/
Implementación de Ruby de Sam Stephenson: https://rubygems.org/gems/ejs
Erubis, una implementación de ERB que también ejecuta JavaScript: http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
Soporte de lenguaje DigitalBrainstem EJS: https://github.com/Digitalbrainstem/ejs-grammar

Licencia

Licenciado bajo la licencia Apache, versión 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )

Plantillas JavaScript integradas de EJS copyright 2112 mde@fleegix.org.

Guía de desarrollo

Módulo básico

objetos incorporados

módulo comunitario

EJS

Instalación

Características

Ejemplo

Uso

Opciones

Etiquetas

Incluye

Delimitadores personalizados

Almacenamiento en caché

Cargador de archivos personalizado

Diseños

Soporte del lado del cliente

Example

Caveats

IDE Integration with Syntax Highlighting

Licencia

Guía de desarrollo

Módulo básico

objetos incorporados

módulo comunitario

EJS

Instalación

Características

Ejemplo

Uso

Opciones

Etiquetas

Incluye

Delimitadores personalizados

Almacenamiento en caché

Cargador de archivos personalizado

Diseños

Soporte del lado del cliente

Example

Caveats

IDE Integration with Syntax Highlighting

Proyectos relacionados

Licencia