EJS
Modèles JavaScript intégrés
Installation
1$ npm install ejs
traits
- Contrôlez le flux avec
<% %>
- Sortie échappée avec
<%= %>
(fonction d'échappement configurable) - Sortie brute sans échappement avec
<%- %>
- Mode Newline-Trim ('newline slurping') avec
-%>
balise de fin - Mode de découpage des espaces (slurp tous les espaces) pour le flux de contrôle avec
<%_ _%>
- Custom delimiters (eg , utilisez
<? ?>
lieu de<% %>
) - Comprend
- Assistance côté client
- Mise en cache statique du JavaScript intermédiaire
- Mise en cache statique des modèles
- Conforme au système Express View
Exemple
1
2
3<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
Essayez EJS en ligne à l' adresse : https://ionicabizau.github.io/ejs-playground/ .
Usage
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
});
Il est également possible d'utiliser ejs.render(dataAndOptions);
où vous transmettez tout dans un seul objet. Dans ce cas, vous vous retrouverez avec des variables locales pour toutes les options passées. Cependant, sachez que votre code pourrait être interrompu si nous ajoutons une option portant le même nom que l'une des propriétés de votre objet de données. Par conséquent, nous vous déconseillons d'utiliser ce raccourci.
Options
-
cache
Les fonctions compilées sont mises en cache, nécessite unfilename
-
filename
Le nom du fichier en cours de rendu. Non requis si vous utilisezrenderFile()
. Utilisé par lecache
pour les caches de clés et pour lesrenderFile()
. -
root
Définit laroot
projet pour includes avec un chemin absolu (/file.ejs). -
context
exécution de la fonction -
compileDebug
Lorsquefalse
aucune instrumentation de débogage n'est compilée -
client
Lorsque la valeur esttrue
, compile une fonction qui peut être rendue dans le navigateur sans avoir à charger EJS Runtime ( ejs.min.js ). -
delimiter
Caractère à utiliser avec les chevrons pour ouvrir / fermer -
debug
Sortie du corps de la fonction générée -
strict
Lorsqu'elle est définie surtrue
, la fonction générée est en mode strict -
_with
ou non des constructionswith() {}
. Sifalse
les locals seront stockés dans l'objetlocals
. Défini surfalse
en mode strict. -
localsName
Nom à utiliser pour l'objet stockant les variables locales lorsqu'il n'est pas utiliséwith
Defaults tolocals
-
rmWhitespace
Supprime tous les espaces blancs sûrs à supprimer, y compris les espaces blancs dermWhitespace
et de fin. Il permet également une version plus sûre de-%>
slurping pour toutes les balises de scriptlet (il ne supprime pas les nouvelles lignes de balises au milieu d'une ligne). -
escape
La fonction d'échappement utilisée avec<%=
construct. Elle est utilisée dans le rendu et est.toString()
ed dans la génération des fonctions client (par défaut, échappe XML). -
outputFunctionName
sur une chaîne (par exemple, 'echo'outputFunctionName
') pour qu'une fonction imprime la sortie dans les balises de scriptlet.
Ce projet utilise JSDoc . Pour obtenir la documentation complète de l'API publique, clonez le référentiel et exécutez npm run doc
. Cela exécutera JSDoc avec les options appropriées et affichera la documentation vers out/
. Si vous voulez les documents sur l'API publique et privée, exécutez npm run devdoc
place.
Mots clés
-
<%
Balise<%
'Scriptlet', pour le flux de contrôle, pas de sortie - Balise de scriptlet
<%_
'Whitespace Slurping', supprime tous les espaces avant -
<%=
Affiche la valeur dans le modèle (échappé) -
<%-
Affiche la valeur non échappée dans le modèle -
<%#
Balise de commentaire, aucune exécution, aucune sortie -
<%%
Affiche un littéral '<%' -
%%>
Renvoie un littéral '%>' -
%>
Etiquette de fin simple -
-%>
Balise Trim-mode ('newline slurp'), coupe après la nouvelle ligne -
_%>
Balise de fin 'Whitespace Slurping', supprime tous les espaces après elle
Pour obtenir la documentation complète sur la syntaxe, veuillez consulter docs/syntax.md .
Comprend
Les inclusions doivent être un chemin absolu ou, dans le cas contraire, sont supposées être relatives au modèle avec l'appel d' include
. Par exemple, si vous ./views/user/show.ejs
de ./views/users.ejs
vous utiliserait <%- include('user/show') %>
.
Vous devez spécifier l'option de filename
pour le modèle avec l'appel d' include
sauf si vous utilisez renderFile()
.
Vous voudrez probablement utiliser la balise de sortie brute ( <%-
) avec votre include pour éviter de double échapper la sortie HTML.
1
2
3
4
5<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}) %>
<% }); %>
</ul>
Les inclusions sont insérées au moment de l'exécution, vous pouvez donc utiliser des variables pour le chemin dans l'appel d' include
(par exemple <%- include(somePath) %>
). Les variables de votre objet de données de niveau supérieur sont disponibles pour toutes vos inclusions, mais les variables locales doivent être transmis.
REMARQUE: les directives d' <% include user/show %>
préprocesseur ( <% include user/show %>
) sont toujours prises en charge.
Délimiteurs personnalisés
Les délimiteurs personnalisés peuvent être appliqués par modèle ou globalement:
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'
Mise en cache
Navires EJS avec un cache de base en cours pour la mise en cache des fonctions JavaScript intermédiaires utilisés pour rendre des modèles Il est facile de brancher la mise en cache à l' aide de nœud LRU. lru-cache
bibliothèque:
1
2
3let ejs = require('ejs'),
LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit
Si vous voulez effacer le cache EJS, appelez ejs.clearCache
. Si vous utilisez le cache LRU et que vous avez besoin d'une limite différente, réinitialisez simplement ejs.cache
sur une nouvelle instance du LRU.
Chargeur de fichiers personnalisé
Le chargeur de fichiers par défaut est fs.readFileSync
, si vous souhaitez le personnaliser, vous pouvez définir ejs.fileLoader.
1
2
3
4
5
6let ejs = require('ejs');
let myFileLoad = function (filePath) {
return 'myFileLoad: ' + fs.readFileSync(filePath);
};
ejs.fileLoader = myFileLoad;
Avec cette fonctionnalité, vous pouvez prétraiter le modèle avant de le lire.
Mises en page
EJS ne prend pas spécifiquement en charge les blocs, mais les mises en page peuvent être implémentées en incluant des en-têtes et des pieds de page, comme ceci:
1
2
3
4
5
6
7
8<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer') -%>
Assistance côté client
Accédez à la dernière version , téléchargez ./ejs.js
ou ./ejs.min.js
. Sinon, vous pouvez le compiler vous-même en clonant le référentiel et en exécutant jake build
(ou $(npm bin)/jake build
si jake ne l'est pas installé dans le monde).
Incluez l'un de ces fichiers sur votre page et les ejs
devraient être disponibles dans le monde entier.
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 plupart des EJS fonctionneront comme prévu; cependant, il y a quelques points à noter:
- Obviously , puisque vous n'avez pas accès au système de fichiers,
ejs.renderFile()
ne fonctionnera pas. Pour la même raison, les
include
ne fonctionnent que si vous utilisez uninclude callback
. Voici un exemple: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 par DigitalBrainstem
Projets liés
Il existe un certain nombre d'implémentations d'EJS:
- TJ's implementation , la v1 de cette bibliothèque: 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 , une implémentation ERB qui exécute également JavaScript: http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
- DigitalBrainstem EJS Language support : https://github.com/Digitalbrainstem/ejs-grammar
Licence
Sous licence Apache License, Version 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )
Modèles JavaScript EJS Embedded copyright 2112 mde@fleegix.org .