EJS

Modelli JavaScript incorporati

Installazione

1$ npm install ejs

Caratteristiche

Controllare il flusso con <% %>
Uscita con escape con <%= %> (funzione di escape configurabile)
Output raw senza caratteri di escape con <%- %>
Modalità newline-trim ('newline slurping') con -%> tag finale
Modalità di taglio degli spazi bianchi (elimina tutti gli spazi bianchi) per il flusso di controllo con <%_ _%>
Custom delimiters (eg , usa <? ?> Invece di <% %> )
Include
Supporto lato client
Memorizzazione nella cache statica di JavaScript intermedio
Memorizzazione nella cache statica 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 utilizzare 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 non funzionare se aggiungiamo un'opzione con lo stesso nome di una delle proprietà del tuo oggetto dati, pertanto non è consigliabile utilizzare questo collegamento.

Opzioni

cache funzioni compilate vengono memorizzate nella cache, richiede il filename
filename Il nome del file in fase di rendering. Non richiesto se stai usando renderFile() . Usato dalla cache per le cache delle chiavi e per include.
root Imposta la root progetto per gli include con un percorso assoluto (/file.ejs).
context Contesto di esecuzione della funzione
compileDebug Quando false non viene compilata alcuna strumentazione di debug
client Se true , compila una funzione di cui è possibile eseguire il rendering nel browser senza la necessità di caricare il runtime EJS ( ejs.min.js ).
delimiter Carattere da utilizzare con le parentesi angolari per l'apertura / chiusura
debug Corpo della funzione generato dall'output
strict Quando impostato su true , la funzione generata è in modalità rigorosa
_with Indica se _with o meno with() {} costrutti with() {} . Se false le _with locali verranno memorizzate nell'oggetto locals . Impostato su false in modalità rigorosa.
localsName Nome da utilizzare per l'oggetto che memorizza le variabili locali quando non viene utilizzato with localsName predefiniti su locals
rmWhitespace Rimuove tutti gli spazi bianchi sicuri da rimuovere, inclusi gli spazi rmWhitespace e finali, abilita anche una versione più sicura di -%> line slurping per tutti i tag dello scriptlet (non elimina le nuove righe dei tag nel mezzo di una riga).
escape La funzione di escaping utilizzata con <%= construct. Viene utilizzata nel rendering ed è .toString() nella generazione di funzioni client (per impostazione predefinita, .toString() XML).
outputFunctionName Impostato su una stringa (ad esempio, "echo" outputFunctionName " outputFunctionName ") per una funzione per stampare l'output all'interno dei tag dello 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 produrrà la documentazione in out/ . Se desideri sia la documentazione API pubblica che quella privata, esegui npm run devdoc invece npm run devdoc .

Include

Include o deve essere un percorso assoluto o, in caso contrario, viene considerato relativo al modello con la chiamata include . Ad esempio, se ./views/user/show.ejs da ./views/users.ejs userebbe <%- include('user/show') %> .

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

Probabilmente vorrai usare il tag di output non elaborato ( <%- ) con la tua inclusione per evitare il doppio escape dell'output HTML.

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

Gli include vengono inseriti in fase di esecuzione, quindi puoi utilizzare le variabili per il percorso nella chiamata include (ad esempio <%- include(somePath) %> ). Le variabili nell'oggetto dati di primo livello sono disponibili per tutti gli include, ma le variabili locali devono essere tramandate.

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

Delimitatori personalizzati

I delimitatori personalizzati possono essere applicati in base al modello 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'

Caching

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

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

Se vuoi cancellare la cache EJS, chiama ejs.clearCache Se stai usando la cache LRU e hai bisogno di un limite diverso, reimposta semplicemente ejs.cache su una nuova istanza della 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 ./ejs.js versione , scarica ./ejs.js o ./ejs.min.js . In alternativa, puoi compilarlo da solo clonando il repository ed eseguendo jake build (o $(npm bin)/jake build se jake non lo è installato a livello globale).

Includi uno di questi file nella tua pagina e ejs dovrebbe 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, gli include non funzionano a meno che non si utilizzi una 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

VSCode: Javascript EJS di DigitalBrainstem

Esistono numerose implementazioni di EJS:

TJ's implementation , la v1 di questa libreria: https://github.com/tj/ejs
Jupiter Consulting's EJS : http://www.embeddedjs.com/
EJS Embedded JavaScript Framework on Google Code : https://code.google.com/p/embeddedjavascript/
Sam Stephenson's Ruby implementation : 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
DigitalBrainstem EJS Language support : 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

Caching

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

Caching

Caricatore di file personalizzato

Layout

Supporto lato client

Example

Caveats

IDE Integration with Syntax Highlighting

Progetti correlati

Licenza