EJS

Modèles JavaScript intégrés

Installation

1$ npm install ejs

Caractéristiques

Contrôle du 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
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 peut ê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 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 includes 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 la valeur est true , 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 sur true , la fonction générée est en mode strict
_with ou non des constructions with() {} . Si false les locals seront stockés dans l'objet locals . Défini sur false en mode strict.
localsName Nom à utiliser pour l'objet stockant les variables locales lorsqu'il n'est pas utilisé with Defaults to locals
rmWhitespace Supprime tous les espaces blancs sûrs à supprimer, y compris les espaces blancs de rmWhitespace et de fin. Il permet également une version plus sûre de -%> slurping 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() 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 d'API publics et privés, 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 sans échappement 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
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 en processus pour la mise en cache des fonctions JavaScript intermédiaires utilisées pour le rendu des modèles. Il est facile de connecter 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 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.js ou ./ejs.min.js . Vous pouvez également 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 ejs devrait ê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 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 JavaScript EJS Embedded 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é

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

Options

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