I am trying to use Embedded Javascript renderer for node: https://github.com/visionmedia/ejs
I would like to know how I can include another view file (partial) inside a .ejs view file.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">_x000D_
_x000D_
<form method="post" class="mt-3">_x000D_
<div class="form-group col-md-4">_x000D_
<input type="text" class="form-control form-control-lg" id="plantName" name="plantName" placeholder="plantName">_x000D_
</div>_x000D_
<div class="form-group col-md-4">_x000D_
<input type="text" class="form-control form-control-lg" id="price" name="price" placeholder="price">_x000D_
</div>_x000D_
<div class="form-group col-md-4">_x000D_
<input type="text" class="form-control form-control-lg" id="harvestTime" name="harvestTime" placeholder="time to harvest">_x000D_
</div>_x000D_
<button type="submit" class="btn btn-primary btn-lg col-md-4">Submit</button>_x000D_
</form>_x000D_
_x000D_
<form method="post">_x000D_
<table class="table table-striped table-responsive-md">_x000D_
<thead>_x000D_
<tr>_x000D_
<th scope="col">Id</th>_x000D_
<th scope="col">FarmName</th>_x000D_
<th scope="col">Player Name</th>_x000D_
<th scope="col">Birthday Date</th>_x000D_
<th scope="col">Money</th>_x000D_
<th scope="col">Day Played</th>_x000D_
<th scope="col">Actions</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<%for (let i = 0; i < farms.length; i++) {%>_x000D_
<tr>_x000D_
<td><%= farms[i]['id'] %></td>_x000D_
<td><%= farms[i]['farmName'] %></td>_x000D_
<td><%= farms[i]['playerName'] %></td>_x000D_
<td><%= farms[i]['birthDayDate'] %></td>_x000D_
<td><%= farms[i]['money'] %></td>_x000D_
<td><%= farms[i]['dayPlayed'] %></td>_x000D_
<td><a href="<%=`/farms/${farms[i]['id']}`%>">Look at Farm</a></td>_x000D_
</tr>_x000D_
<%}%>_x000D_
</table>_x000D_
</form>
_x000D_
app.js add
app.set('view engine','ejs')
add your partial file(ejs) in views/partials
in index.ejs
<%- include('partials/header.ejs') %>
EJS by itself currently does not allow view partials. Express does.
In oficial documentation https://github.com/mde/ejs#includes show that includes works like that:
<%- include('../partials/head') %>
Works with Express 4.x :
The Correct way to include partials in the template according to this you should use:
<%- include('partials/youFileName.ejs') %>
.
You are using:
<% include partials/yourFileName.ejs %>
which is deprecated.
Express 3.x no longer support partial. According to the post ejs 'partial is not defined', you can use "include" keyword in EJS to replace the removed partial functionality.
In Express 4.x
I used the following to load ejs
:
var path = require('path');
// Set the default templating engine to ejs
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// The views/index.ejs exists in the app directory
app.get('/hello', function (req, res) {
res.render('index', {title: 'title'});
});
Then you just need two files to make it work - views/index.ejs
:
<%- include partials/navigation.ejs %>
And the views/partials/navigation.ejs
:
<ul><li class="active">...</li>...</ul>
You can also tell Express to use ejs
for html templates:
var path = require('path');
var EJS = require('ejs');
app.engine('html', EJS.renderFile);
// Set the default templating engine to ejs
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// The views/index.html exists in the app directory
app.get('/hello', function (req, res) {
res.render('index.html', {title: 'title'});
});
Finally you can also use the ejs
layout module:
var EJSLayout = require('express-ejs-layouts');
app.use(EJSLayout);
This will use the views/layout.ejs
as your layout.
As of Express 4.x
app.js
// above is all your node requires
// view engine setup
app.set('views', path.join(__dirname, 'views')); <-- ./views has all your .ejs files
app.set('view engine', 'ejs');
error.ejs
<!-- because ejs knows your root directory for views, you can navigate to the ./base directory and select the header.ejs file and include it -->
<% include ./base/header %>
<h1> Other mark up here </h1>
<% include ./base/footer %>
Source: Stackoverflow.com