Node.js - EJS - including a partial

问题

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.

回答1:

With Express 3.0:

<%- include myview.ejs %>

the path is relative from the caller who includes the file, not from the views directory set with app.set("views", "path/to/views").

EJS includes

回答2:

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.

回答3:

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

回答4:

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.

回答5:

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

 <form method="post" class="mt-3">
        <div class="form-group col-md-4">
          <input type="text" class="form-control form-control-lg" id="plantName" name="plantName" placeholder="plantName">
        </div>
        <div class="form-group col-md-4">
          <input type="text" class="form-control form-control-lg" id="price" name="price" placeholder="price">
        </div>
        <div class="form-group col-md-4">
            <input type="text" class="form-control form-control-lg" id="harvestTime" name="harvestTime" placeholder="time to harvest">
          </div>
        <button type="submit" class="btn btn-primary btn-lg col-md-4">Submit</button>
      </form>

<form method="post">
        <table class="table table-striped table-responsive-md">
            <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">FarmName</th>
                <th scope="col">Player Name</th>
                <th scope="col">Birthday Date</th>
                <th scope="col">Money</th>
                <th scope="col">Day Played</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>
            <%for (let i = 0; i < farms.length; i++) {%>
                 <tr>
                    <td><%= farms[i]['id'] %></td>
                    <td><%= farms[i]['farmName'] %></td>
                    <td><%= farms[i]['playerName'] %></td>
                    <td><%= farms[i]['birthDayDate'] %></td>
                    <td><%= farms[i]['money'] %></td>
                    <td><%= farms[i]['dayPlayed'] %></td>
                    <td><a href="<%=`/farms/${farms[i]['id']}`%>">Look at Farm</a></td>
                </tr>
            <%}%>
        </table>
    </form>

回答6:

Try to use the whole path ==>

<% include C:/Users/UserName/Desktop/NodeJS/partials/header.ejs %> ---> pay attention to '/'

Tried this with node --version v8.11.4 + express module v.4.x

回答7:

EJS by itself currently does not allow view partials. Express does.

来源：https://stackoverflow.com/questions/5404830/node-js-ejs-including-a-partial

标签

node.js

ejs