Awesome 社區模塊

EJS

Embedded JavaScript templates

Build Status Developing Dependencies Known Vulnerabilities

Installation

1
$ npm install ejs

Features

  • Control flow with <% %>
  • Escaped output with<%= %>
  • Unescaped raw output with <%- %>
  • Newline-trim mode ('newline slurping') with-%>
  • Whitespace-trim mode (slurp all whitespace) for control flow with <%_ _%>
  • Custom delimiters (eg, use<? ?><% %>
  • Includes
  • Client-side support
  • Static caching of intermediate JavaScript
  • Static caching of templates
  • Complies with the

Example

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

Try EJS online at:

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

It is also possible to useejs.render(dataAndOptions);

Options

  • cache Compiled functions are cached, requires filename
  • filenameThe name of the file being rendered. Not required if you are usingrenderFile()cache
  • root Set project root for includes with an absolute path (/file.ejs).
  • context Function execution context
  • compileDebugWhenfalse
  • clientWhentrue
  • delimiter Character to use with angle brackets for open/close
  • debug Output generated function body
  • strictWhen set totrue
  • _withWhether or not to usewith() {}falselocalsfalse
  • localsNameName to use for the object storing local variables when not usingwithlocals
  • rmWhitespaceRemove all safe-to-remove whitespace, including leading and trailing whitespace. It also enables a safer version of-%>
  • escapeThe escaping function used with<%=.toString()
  • outputFunctionName Set to a string (eg, 'echo' or 'print') for a function to print output inside scriptlet tags.

This project usesnpm run docout/npm run devdoc

Tags

  • <% 'Scriptlet' tag, for control-flow, no output
  • <%_ 'Whitespace Slurping' Scriptlet tag, strips all whitespace before it
  • <%= Outputs the value into the template (escaped)
  • <%- Outputs the unescaped value into the template
  • <%# Comment tag, no execution, no output
  • <%% Outputs a literal '<%'
  • %%> Outputs a literal '%>'
  • %> Plain ending tag
  • -%> Trim-mode ('newline slurp') tag, trims following newline
  • _%> 'Whitespace Slurping' ending tag, removes all whitespace after it

For the full syntax documentation, please see docs/syntax.md.

Includes

Includes either have to be an absolute path, or, if not, are assumed as relative to the template with theinclude./views/user/show.ejs./views/users.ejs<%- include('user/show') %>

You must specify thefilenameincluderenderFile()

You'll likely want to use the raw output tag (<%-

1 2 3 4 5
<ul> <% users.forEach(function(user){ %> <%- include('user/show', {user: user}) %> <% }); %> </ul>

Includes are inserted at runtime, so you can use variables for the path in theinclude<%- include(somePath) %>

NOTE: Include preprocessor directives (<% include user/show %>

Custom delimiters

Custom delimiters can be applied on a per-template basis, or globally:

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'

Caching

EJS ships with a basic in-process cache for caching the intermediate JavaScript functions used to render templates. It's easy to plug in LRU caching using Node'slru-cache

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

If you want to clear the EJS cache, callejs.clearCacheejs.cache

Custom file loader

The default file loader isfs.readFileSync

1 2 3 4 5 6
let ejs = require('ejs'); let myFileLoad = function (filePath) { return 'myFileLoad: ' + fs.readFileSync(filePath); }; ejs.fileLoader = myFileLoad;

With this feature, you can preprocess the template before reading it.

Layouts

EJS does not specifically support blocks, but layouts can be implemented by including headers and footers, like so:

1 2 3 4 5 6 7 8
<%- include('header') -%> <h1> Title </h1> <p> My page </p> <%- include('footer') -%>

Client-side support

Go to the./ejs.js./ejs.min.jsjake build$(npm bin)/jake build

Include one of these files on your page, andejs

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

Most of EJS will work as expected; however, there are a few things to note:

  1. Obviously, since you do not have access to the filesystem,ejs.renderFile()
  2. For the same reason,includeinclude callback

    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 by

There are a number of implementations of EJS:

  • TJ's implementation, the v1 of this library:
  • Jupiter Consulting's EJS:
  • EJS Embedded JavaScript Framework on Google Code:
  • Sam Stephenson's Ruby implementation:
  • Erubis, an ERB implementation which also runs JavaScript:
  • DigitalBrainstem EJS Language support:

License

Licensed under the Apache License, Version 2.0 (


EJS Embedded JavaScript templates copyright 2112