EJS

Modèles JavaScript intégrés

Installation

1$ npm install ejs

Caractéristiques

Contrôler le flux avec<% %>
Sortie échappée avec <%= %>(fonction d'échappement configurable)
Sortie brute non échappée avec<%- %>
Mode Newline-trim (« newline slurping ») avec -%>balise de fin
Mode de suppression des espaces (absorber tous les espaces) pour contrôler le flux avec<%_ _%>
Délimiteurs personnalisés (par exemple, utiliser <? ?>à la place 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 de visualisation Express

Exemple

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

Essayez EJS en ligne sur : https://ionicabizau.github.io/ejs-playground/ .

Usage

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

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 avec le même name comme l'une des propriétés de votre objet de données. Par conséquent, nous vous déconseillons d'utiliser ce raccourci.

Possibilités

cache Les fonctions compilées sont mises en cache, nécessitantfilename
filename Le nom du fichier en cours de rendu. Non requis si vous utilisez renderFile(). Utilisé par cachepour les caches de clés et pour les inclusions.
root Définissez la racine du projet pour les inclusions avec un chemin absolu (/file.ejs).
context Contexte d'exécution de la fonction
compileDebug Lorsqu'aucune falseinstrumentation de débogage n'est compilée
client When true, compile une fonction qui peut être rendue dans le navigateur sans avoir besoin de charger le runtime EJS ( ejs.min.js ).
delimiter Caractère à utiliser avec des crochets pour ouvrir/fermer
debug Corps de fonction généré par la sortie
strict Lorsqu'elle est définie sur true, la fonction générée est en mode strict
_with S'il faut ou non utiliser with() {}des constructions. Dans falsece cas, les éléments locaux seront stockés dans l' localsobjet. Défini sur falseen mode strict.
localsName Nom à utiliser pour l'objet stockant les variables locales lorsque vous n'utilisez pas withles valeurs par défaut pourlocals
rmWhitespace Supprimez tous les espaces pouvant être supprimés en toute sécurité, y compris les espaces de début et de fin. Cela permet également une version plus sûre de -%>la suppression de ligne 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()éditée dans la génération des fonctions client. (Par défaut, échappe au XML).
outputFunctionName Défini sur une chaîne (par exemple, « echo » ou « print ») pour qu'une fonction imprime la sortie à l'intérieur des balises de scriptlet.

Ce projet utilise JSDoc . Pour 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 dans out/. Si vous souhaitez consulter à la fois la documentation de l'API publique et privée, exécutez-la npm run devdocà la place.

Mots clés

<% Balise 'Scriptlet', pour le flux de contrôle, pas de sortie
<%_ Balise de scriptlet 'Whitespace Slurping', supprime tous les espaces devant elle
<%= Affiche la valeur dans le modèle (échappée)
<%- Affiche la valeur non échappée dans le modèle
<%# Balise de commentaire, pas d'exécution, pas de sortie
<%% Génère un littéral '<%'
%%> Affiche un '%>' littéral
%> Balise 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

Pour la documentation complète sur la syntaxe, veuillez consulterdocs/syntax.md.

Comprend

Les inclusions doivent soit être un chemin absolu, soit, dans le cas contraire, elles sont supposées relatives au modèle avec l' includeappel. Par exemple, si vous incluez ./views/user/show.ejsfrom , ./views/users.ejsvous utiliserez <%- include('user/show') %>.

Vous devez spécifier l' filenameoption pour le modèle avec l' include appel, sauf si vous utilisez renderFile().

Vous souhaiterez probablement utiliser la balise de sortie brute ( <%-) avec votre inclusion pour éviter une double évasion de 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' includeappel (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 transmises.

REMARQUE : Les directives d'inclusion du 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
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'

Mise en cache

EJS est livré avec un cache in-process de base pour mettre en cache les fonctions JavaScript intermédiaires utilisées pour rendre les modèles. Il est facile de brancher la mise en cache LRU à l'aide de la lru-cachebibliothèque de Node :

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

Si vous souhaitez vider le cache EJS, appelez ejs.clearCacheSi vous utilisez le cache LRU et avez besoin d'une limite différente, réinitialisez simplement ejs.cachevers 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
6
let 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.jsou ./ejs.min.js. Vous pouvez également la compiler vous-même en clonant le référentiel et en l'exécutant jake build(ou $(npm bin)/jake buildsi jake n'est pas installé globalement).

Incluez l'un de ces fichiers sur votre page et ejsdevrait être disponible 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()cela ne fonctionnera pas.

Pour la même raison, includeles s ne fonctionnent que si vous utilisez un include callback. Voici un exemple :

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 par DigitalBrainstem

Il existe un certain nombre d'implémentations d'EJS :

Implémentation de TJ, la v1 de cette bibliothèque : https://github.com/tj/ejs
EJS de Jupiter Consulting : http://www.embeddedjs.com/
Framework JavaScript intégré EJS sur Google Code : https://code.google.com/p/embeddedjavascript/
Implémentation Ruby de Sam Stephenson : 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
Prise en charge du langage DigitalBrainstem EJS : https://github.com/Digitalbrainstem/ejs-grammar

Licence

Sous licence Apache, version 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )

Modèles JavaScript intégrés EJS copyright 2112 mde@fleegix.org.

Guide de développement

Module de base

objets intégrés

module communautaire

EJS

Installation

Caractéristiques

Exemple

Usage

Possibilités

Mots clés

Comprend

Délimiteurs personnalisés

Mise en cache

Chargeur de fichiers personnalisé

Mises en page

Assistance côté client

Example

Caveats

IDE Integration with Syntax Highlighting

Licence

Guide de développement

Module de base

objets intégrés

module communautaire

EJS

Installation

Caractéristiques

Exemple

Usage

Possibilités

Mots clés

Comprend

Délimiteurs personnalisés

Mise en cache

Chargeur de fichiers personnalisé

Mises en page

Assistance côté client

Example

Caveats

IDE Integration with Syntax Highlighting

Projets liés

Licence