EJS

Modèles JavaScript intégrés

Installation

1$ npm install ejs

Caractéristiques

Contrôler le flux avec <% %>
Sortie d' <%= %>échappement avec (fonction d'échappement configurable)
Sortie brute sans échappement avec <%- %>
Mode de coupe de nouvelle ligne (« newline slurping ») avec -%>balise de fin
Mode de rognage des espaces (slurp tous les espaces) pour le flux de contrôle avec <%_ _%>
Délimiteurs personnalisés (par exemple, utilisez <? ?>au lieu de <% %>)
Comprend
Assistance 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 passées. Cependant, sachez que votre code pourrait casser 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.

Options

cache Les fonctions compilées sont mises en cache, nécessitent filename
filename 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 Lorsque 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 é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
_withwith() {}S'il faut ou non utiliser des constructions. Si, falsealors les 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 les withvaleurs par défaut pourlocals
rmWhitespace Supprimez tous les espaces blancs -%>pouvant être supprimés en toute sécurité, y compris les espaces blancs de début et de fin. Cela permet également une version plus sûre de la suppression de ligne pour toutes les balises scriptlet (elle 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 utilisée dans .toString()la génération des fonctions client. (Par défaut, échappe 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 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 voulez à la fois la documentation de l'API publique et privée, exécutez-la à la npm run devdocplace.

Mots clés

<% Balise 'Scriptlet', pour le flux de contrôle, pas de sortie
<%_ Balise Scriptlet 'Whitespace Slurping', supprime tous les espaces blancs avant elle
<%= Sort la valeur dans le modèle (échappé)
<%- Sort la valeur non échappée dans le modèle
<%# Balise de commentaire, pas d'exécution, pas de sortie
<%% Renvoie un littéral'<%'
%%> Renvoie un littéral'%>'
%> Balise de fin simple
-%> Balise en mode rognage ('newline slurp'), rogne la nouvelle ligne suivante
_%> Balise de fin 'Whitespace Slurping', supprime tous les espaces après elle

Pour la documentation complète de la syntaxe, veuillez consulter docs/syntax.md.

Comprend

Les inclusions doivent être soit un chemin absolu, soit, si ce n'est pas le cas, elles sont supposées être relatives au modèle avec l' includeappel. Par exemple, si vous incluez ./views/user/show.ejsdepuis, ./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 voudrez probablement utiliser la balise de sortie brute ( <%-) avec votre inclusion pour éviter de doubler 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 tous vos inclusions, mais les variables locales doivent être transmises.

REMARQUE : Inclure les directives de préprocesseur ( <% include user/show %>) est toujours pris 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 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 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 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.cacheune 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.

Dispositions

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. Alternativement, vous pouvez le 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()ne fonctionnera pas.

Pour la même raison, les includes 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 librairie : https://github.com/tj/ejs
EJS de Jupiter Consulting : http://www.embeddedjs.com/
EJS Embedded JavaScript Framework 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 EJS DigitalBrainstem : https://github.com/Digitalbrainstem/ejs-grammar

Licence

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

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

Guide de développement

Module de base

Objets intégrés

Module communautaire

EJS

Installation

Caractéristiques

Exemple

Usage

Options

Mots clés

Comprend

Délimiteurs personnalisés

Mise en cache

Chargeur de fichiers personnalisé

Dispositions

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

Options

Mots clés

Comprend

Délimiteurs personnalisés

Mise en cache

Chargeur de fichiers personnalisé

Dispositions

Assistance côté client

Example

Caveats

IDE Integration with Syntax Highlighting

Projets liés

Licence