Fantastico modulo community

EJS

Modelli JavaScript incorporati

Stato di costruzione Sviluppo delle dipendenze Vulnerabilità note

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 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 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, richiede filename
  • filename Il nome del file renderFile()di cui cacheeseguire 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 funzione
  • compileDebug Quando falsenon viene compilata alcuna strumentazione di debug
  • client When true, 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/chiudi
  • debug Corpo della funzione generato dall'output
  • strict Quando è impostata su true, la funzione generata è in modalità rigorosa
  • _with Se utilizzare o meno i with() {}costrutti. In caso falseaffermativo, i locali verranno archiviati localsnell'oggetto. Impostato su falsein modalità rigorosa.
  • localsName Nome da utilizzare per l'oggetto che memorizza le variabili locali quando non si utilizza withDefaults 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 devdocinvece.

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 includechiamata.Ad esempio, se includi ./views/user/show.ejsda ./views/users.ejs, utilizzerai <%- 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 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 includechiamata (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 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 la memorizzazione nella cache delle funzioni JavaScript intermedie utilizzate per 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 vuoi cancellare la cache EJS, chiama ejs.clearCache.Se stai usando la cache LRU e hai bisogno di un limite diverso, reimposta 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 da solo clonando il repository ed eseguendo jake build(o $(npm bin)/jake buildse jake non è installato globalmente).

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:

  1. Obviously, poiché non hai accesso al filesystem, ejs.renderFile()non funzionerà.
  2. Per lo stesso motivo, includes non funziona a meno che non 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

VSCode:Javascript EJS di DigitalBrainstem

Esistono numerose implementazioni di EJS:

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 .