EJS
Modelli JavaScript incorporati
Installazione
1$ npm install ejs
Caratteristiche
- Controlla il flusso con
<% %>
- Uscita con
<%= %>
escape con (funzione di escape configurabile) - Output raw senza escape con
<%- %>
- Modalità newline-trim ("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 es. utilizzare al
<? ?>
posto di<% %>
) - Include
- Supporto lato client
- Cache statica di JavaScript intermedio
- 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
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
});
È 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 rompersi se aggiungiamo un'opzione con lo stesso name come una delle proprietà dell'oggetto dati. Pertanto, non è consigliabile utilizzare questa scorciatoia.
Opzioni
cache
Le funzioni compilate sono memorizzate nella cache, richiedefilename
filename
Il nome del filerenderFile()
di cuicache
eseguire il rendering. Non richiesto se si utilizza . Utilizzato da per le cache chiave e per le inclusioni.root
Imposta la radice del progetto per include con un percorso assoluto (/file.ejs).context
Contesto di esecuzione della funzionecompileDebug
Quandofalse
non viene compilata alcuna strumentazione di debugclient
Whentrue
, compila una funzione che può essere resa nel browser senza dover caricare EJS Runtime ( ejs.min.js ).delimiter
Carattere da usare con parentesi angolari per apri/chiudidebug
Corpo della funzione generato dall'outputstrict
Quando è impostata sutrue
, la funzione generata è in modalità rigorosa_with
Se utilizzare o meno iwith() {}
costrutti. In casofalse
affermativo, i locali verranno archiviatilocals
nell'oggetto. Impostato sufalse
in modalità rigorosa.localsName
Nome da utilizzare per l'oggetto che memorizza le variabili locali quando non si utilizzawith
Defaults tolocals
rmWhitespace
Rimuove tutti gli spazi bianchi sicuri da rimuovere, inclusi gli spazi iniziali e finali.Abilita inoltre una versione più sicura di-%>
slurping di riga per tutti i tag scriptlet (non rimuove le nuove righe di tag nel mezzo di una riga).escape
La funzione di escape utilizzata con<%=
construct.È utilizzata nel rendering ed è.toString()
ed è ed è nella generazione delle funzioni client (per impostazione predefinita, l'escape XML).outputFunctionName
Impostato su una stringa (ad es.,'echo' o'print') per una funzione per stampare 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 i documenti API pubblici che quelli privati, esegui npm run devdoc
invece.
tag
<%
Tag 'Scriptlet', per flusso di controllo, nessun output<%_
Tag Scriptlet 'Whitespace Slurping', rimuove tutti gli spazi bianchi prima di esso<%=
Emette il valore nel modello (escaped)<%-
Emette il valore senza caratteri di escape nel modello<%#
Tag di commento, nessuna esecuzione, nessun output<%%
Emette un letterale'<%'%%>
Emette un letterale'%>'%>
Tag finale semplice-%>
Tag Trim-mode ("newline slurp"), taglia dopo newline_%>
Il tag finale "Whitespace Slurping", rimuove tutti gli spazi bianchi dopo di esso
Per la documentazione completa sulla sintassi, vedere docs/syntax.md.
Include
Gli include devono essere un percorso assoluto o, in caso contrario, devono essere considerati relativi al modello con la include
chiamata.Ad esempio, se includi ./views/user/show.ejs
da ./views/users.ejs
, utilizzerai <%- include('user/show') %>
.
È necessario specificare l' filename
opzione per il modello con la include
chiamata, a meno che non si utilizzi renderFile()
.
Probabilmente vorrai utilizzare 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>
Le inclusioni vengono inserite in fase di esecuzione, quindi è possibile utilizzare le variabili per il percorso nella
include
chiamata (ad esempio <%- include(somePath) %>
).Le variabili nell'oggetto dati di livello superiore sono disponibili per tutte le inclusioni, ma le variabili locali devono essere passate.
NOTA: le direttive del preprocessore Includi ( <% 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
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'
memorizzazione nella cache
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 lru-cache
libreria di Node :
1
2
3let 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
una 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
6let 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.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 è installato globalmente).
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,
include
s non funziona a meno che non utilizzi uninclude callback
.Ecco un esempio: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 di DigitalBrainstem
Progetti correlati
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/
- EJS Embedded JavaScript Framework 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 per il linguaggio EJS di DigitalBrainstem: 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 )
EJS Embedded JavaScript templates copyright 2112 mde@fleegix.org .