EJS cheatsheet

#install

npm install ejs

#hello.ejs

<% if (user.email) { %>
  <h1><%= user.email %></h1>
<% } %>

#CLI

$ ejs hello.ejs -o hello.html

let ejs = require('ejs');

let people = ['geddy', 'neil', 'alex'];
let tpl = '<%= people.join(", "); %>';

let html = ejs.render(tpl, {people: people});
console.log(html);

Pass EJS a template string and some data.

<script src="ejs.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'];
  let html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>

Use ejs in a script tag.

Render and specify an output file.

$ ejs hello.ejs -o hello.html

Feed it a template file and a data file

$ ejs hello.ejs -f data.json -o hello.html

<%# This line will denote a comment %>

<%# This is a multi-line EJS comment.
    It can span multiple lines,
    but will not be displayed 
    in the final HTML output. 
%>

let ejs = require('ejs');
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
});

<%- include('partials/navbar.ejs') %>

Include a template with data:

<% include('header', { title: 'My Page' }) %>

<ul>
  <% users.forEach(function(user){ %>
    <%- include('item', {user: user}); %>
  <% }); %>
</ul>

To include a template, needs a file name option, paths are relative

<% if (userLoggedIn) { %>
  <p>Welcome, <%= username %>!</p>
<% } else { %>
  <p>Please log in.</p>
<% } %>

<ul>
  <% for(i=0; i < users.length; i++) { %>
  <li> <%= users[i].username %> </li>
  <% } %>
</ul>

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'

let ejs = require('ejs'),
LRU = require('lru-cache');

// LRU cache with 100-item limit
ejs.cache = LRU(100);

let ejs = require('ejs');
let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoader;

<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

<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>

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

Examples of use :

$ ejs -p [ -c ] ./template_file.ejs -o ./output.html
$ ejs ./test/fixtures/user.ejs name=Lerxst
$ ejs -n -l _ ./some_template.ejs -f ./data_file.json