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 de coupure de ligne ('newline slurping') avec -%> balise de fin
Mode de suppression des espaces (slurp tous les espaces) pour contrôler le flux avec <%_ _%>
Custom delimiters (eg , utilisez <? ?> lieu de <% %> )
Comprend
Support côté client
Mise en cache statique de 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 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 passez tout dans un seul objet. Dans ce cas, vous vous retrouverez avec des variables locales pour toutes les options transmises. Cependant, sachez que votre code pourrait se casser 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.

Les options

cache Les fonctions compilées sont mises en cache, nécessite un filename
filename Nom du fichier en cours de rendu. Non requis si vous utilisez renderFile() . Utilisé par le cache pour les caches de clés et pour les renderFile() .
root Définit la root projet pour les inclusions avec un chemin absolu (/file.ejs).
context exécution de la fonction
compileDebug Lorsque false aucune instrumentation de débogage n'est compilée
client Lorsque true , compile une fonction qui peut être rendue dans le navigateur sans avoir à charger le runtime EJS ( ejs.min.js ).
delimiter Caractère à utiliser avec des équerres pour ouvrir / fermer
debug corps de la fonction générée par la sortie
strict Lorsqu'elle est définie sur true , la fonction générée est en mode strict
_with ou non utiliser les constructions with() {} . Si false les sections locales seront stockées dans l'objet locals . Définies sur false en mode strict.
localsName Nom à utiliser pour l'objet stockant des variables locales lorsqu'il n'est pas utilisé with valeurs with défaut pour les locals
rmWhitespace Supprime tous les espaces sûrs à supprimer, y compris les espaces blancs de rmWhitespace et de fin. Il permet également une version plus sûre de -%> slurping 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 la construction <%= . Elle est utilisée dans le rendu et est .toString() dans la génération des fonctions client. (Par défaut, elle échappe XML).
outputFunctionName sur une chaîne (par exemple, 'echo' outputFunctionName ') pour une fonction pour imprimer 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 produira la documentation vers out/ . Si vous voulez les documents d'API publics et privés, exécutez npm run devdoc plutôt npm run devdoc .

Mots clés

<% 'Scriptlet' tag, pour control-flow, pas de sortie
<%_ Balise Scriptlet 'Whitespace Slurping', supprime tous les espaces avant elle
<%= Sort la valeur dans le modèle (échappé)
<%- Sort la valeur non échappée dans le modèle
<%# Balise de commentaire, aucune exécution, aucune sortie
<%% Affiche un littéral '<%'
%%> Sort 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 consulter docs/syntax.md .

Comprend

Les inclusions doivent être un chemin absolu ou, sinon, sont supposées relatives au modèle avec l'appel include . Par exemple, si vous ./views/user/show.ejs partir de ./views/users.ejs vous utiliserait <%- include('user/show') %> .

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

Vous voudrez probablement utiliser la balise de sortie brute ( <%- ) avec votre inclusion 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 lors de l'exécution, vous pouvez donc utiliser des variables pour le chemin d'accès dans l'appel 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
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 de base pour la mise en cache des fonctions JavaScript intermédiaires utilisées pour le rendu des modèles. Il est facile de brancher la mise en cache LRU à l'aide de la bibliothèque lru-cache 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 effacer le cache EJS, appelez ejs.clearCache . Si vous utilisez le cache LRU et avez besoin d'une limite différente, réinitialisez simplement ejs.cache sur une nouvelle instance de 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.

Disposition

EJS ne prend pas spécifiquement en charge les blocs, mais les dispositions 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') -%>

Support côté client

Accédez à la dernière version , téléchargez ./ejs.js ou ./ejs.min.js . Vous pouvez également le compiler vous-même en clonant le référentiel et en exécutant la jake build (ou $(npm bin)/jake build si jake n'est pas installés 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, mais 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 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:

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 EJS Embedded JavaScript copyright 2112 mde@fleegix.org .

Guide de développement

Module de base

Objets intégrés

Module communautaire

EJS

Installation

Caractéristiques

Exemple

Usage

Les options

Mots clés

Comprend

Délimiteurs personnalisés

Mise en cache

Chargeur de fichiers personnalisé

Disposition

Support 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

Les options

Mots clés

Comprend

Délimiteurs personnalisés

Mise en cache

Chargeur de fichiers personnalisé

Disposition

Support côté client

Example

Caveats

IDE Integration with Syntax Highlighting

Projets liés

Licence