EJS

Modelli JavaScript incorporati

Installazione

1$ npm install ejs

Caratteristiche

Controlla il flusso con<% %>
Uscita di escape con <%= %>(funzione di escape configurabile)
Output grezzo senza escape con<%- %>
Modalità di ritaglio di nuova riga ("newline slurping") con -%>tag finale
Modalità di taglio degli spazi bianchi (slurp tutti gli spazi bianchi) per il controllo del flusso con<%_ _%>
Delimitatori personalizzati (ad esempio, utilizzare <? ?>al posto di <% %>)
Include
Supporto lato client
Caching statico di JavaScript intermedio
Caching statico dei modelli
Conforme al sistema di visualizzazione Express

Esempio

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

Prova EJS online su: https://ionicabizau.github.io/ejs-playground/ .

Utilizzo

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
});

È anche possibile usare ejs.render(dataAndOptions);dove passi tutto in un singolo oggetto. In tal caso, ti ritroverai con variabili locali per tutte le opzioni passate. Tuttavia, tieni presente che il tuo codice potrebbe rompersi se aggiungiamo un'opzione con lo stesso name come una delle proprietà dell'oggetto dati. Pertanto, non consigliamo di utilizzare questa scorciatoia.

Opzioni

cache Le funzioni compilate vengono memorizzate nella cache, richiedendofilename
filename Il nome del file di cui viene eseguito il rendering. Non richiesto se si utilizza renderFile(). Utilizzato da cacheper le cache delle chiavi e per gli include.
root Imposta la radice del progetto per gli include con un percorso assoluto (/file.ejs).
context Contesto di esecuzione della funzione
compileDebug Quando falsenon viene compilata alcuna strumentazione di debug
client When true, compila una funzione che può essere renderizzata nel browser senza la necessità di caricare EJS Runtime ( ejs.min.js ).
delimiter Carattere da utilizzare con parentesi angolari per aprire/chiudere
debug Corpo della funzione generata dall'output
strict Se impostato su true, la funzione generata è in modalità rigorosa
_with Se utilizzare o meno with() {}i costrutti. In falsetal caso le variabili locali verranno archiviate nell'oggetto locals. Impostate su falsein modalità rigorosa.
localsName Nome da utilizzare per l'oggetto che memorizza le variabili locali quando non si utilizzano withi Defaultlocals
rmWhitespace Rimuove tutti gli spazi bianchi sicuri da rimuovere, inclusi gli spazi bianchi iniziali e finali. Abilita inoltre una versione più sicura del -%>line slurping per tutti i tag scriptlet (non elimina le nuove righe di tag nel mezzo di una riga).
escape La funzione di escape utilizzata con <%=build. Viene utilizzata nel rendering e viene .toString()modificata nella generazione di funzioni client (per impostazione predefinita, evita XML).
outputFunctionName Impostato su una stringa (ad esempio, 'echo' o 'print') affinché una funzione stampi l'output all'interno dei tag scriptlet.

Questo progetto utilizza JSDoc . Per la documentazione completa dell'API pubblica, clona il repository ed esegui npm run doc. Questo eseguirà JSDoc con le opzioni appropriate e restituirà la documentazione a out/. Se desideri sia la documentazione API pubblica che quella privata, esegui npm run devdocinvece.

Include

Gli include devono essere un percorso assoluto oppure, in caso contrario, vengono considerati relativi al modello con la includechiamata. Ad esempio, se includi ./views/user/show.ejsda ./views/users.ejsdovresti utilizzare <%- include('user/show') %>.

È necessario specificare l' filenameopzione per il modello con la include chiamata a meno che non si utilizzi renderFile().

Probabilmente vorrai utilizzare il tag di output non elaborato ( <%-) con il tuo include per evitare il doppio escape dell'output HTML.

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

Le inclusioni vengono inserite in fase di esecuzione, quindi puoi utilizzare variabili per il percorso nella includechiamata (ad esempio <%- include(somePath) %>). Le variabili nell'oggetto dati di livello superiore sono disponibili per tutte le tue inclusioni, ma le variabili locali devono essere passate.

NOTA: le direttive Includi del preprocessore ( <% include user/show %>) sono ancora supportate.

Delimitatori personalizzati

I delimitatori personalizzati possono essere applicati in base al modello o a livello globale:

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'

Memorizzazione nella cache

EJS viene fornito con una cache in-process di base per memorizzare nella cache le funzioni JavaScript intermedie utilizzate per eseguire il rendering dei modelli. È facile collegare la cache LRU utilizzando la lru-cachelibreria di Node:

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

Se desideri svuotare la cache EJS, chiama ejs.clearCacheSe stai utilizzando la cache LRU e hai bisogno di un limite diverso, ripristina semplicemente ejs.cacheuna nuova istanza di LRU.

Caricatore di file personalizzato

Il caricatore di file predefinito è fs.readFileSync, se vuoi personalizzarlo, puoi impostare 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 questa funzione puoi preelaborare il modello prima di leggerlo.

Layout

EJS non supporta specificamente i blocchi, ma i layout possono essere implementati includendo intestazioni e piè di pagina, in questo modo:

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

Supporto lato client

Vai all'ultima versione , scarica ./ejs.jso ./ejs.min.js. In alternativa, puoi compilarlo tu stesso clonando il repository ed eseguendo jake build(o $(npm bin)/jake buildse jake non è installato a livello globale).

Includi uno di questi file nella tua pagina e ejsdovrebbe essere disponibile a livello globale.

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 maggior parte di EJS funzionerà come previsto; tuttavia, ci sono alcune cose da notare:

Obviously, poiché non hai accesso al filesystem, ejs.renderFile()non funzionerà.

Per lo stesso motivo, includei s non funzionano a meno che non si utilizzi un include callback. Ecco un esempio:

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

Codice VSC: Javascript EJS di DigitalBrainstem

Esistono numerose implementazioni di EJS:

L'implementazione di TJ, la v1 di questa libreria: https://github.com/tj/ejs
EJS di Jupiter Consulting: http://www.embeddedjs.com/
Framework JavaScript incorporato EJS su Google Code: https://code.google.com/p/embeddedjavascript/
Implementazione Ruby di Sam Stephenson: https://rubygems.org/gems/ejs
Erubis, un'implementazione ERB che esegue anche JavaScript: http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
Supporto linguistico DigitalBrainstem EJS: https://github.com/Digitalbrainstem/ejs-grammar

Licenza

Concesso in licenza con la licenza Apache, versione 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )

Modelli JavaScript incorporati EJS copyright 2112 mde@fleegix.org.

Guida allo sviluppo

Modulo base

oggetti incorporati

modulo comunitario

EJS

Installazione

Caratteristiche

Esempio

Utilizzo

Opzioni

Tag

Include

Delimitatori personalizzati

Memorizzazione nella cache

Caricatore di file personalizzato

Layout

Supporto lato client

Example

Caveats

IDE Integration with Syntax Highlighting

Licenza

Guida allo sviluppo

Modulo base

oggetti incorporati

modulo comunitario

EJS

Installazione

Caratteristiche

Esempio

Utilizzo

Opzioni

Tag

Include

Delimitatori personalizzati

Memorizzazione nella cache

Caricatore di file personalizzato

Layout

Supporto lato client

Example

Caveats

IDE Integration with Syntax Highlighting

Progetti correlati

Licenza