Module communautaire génial

EJS

Modèles JavaScript intégrés

État de la construction Développement de dépendances Vulnérabilités connues

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:

  1. Obviously , puisque vous n'avez pas accès au système de fichiers, ejs.renderFile() ne fonctionnera pas.
  2. 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:

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 .