关于Nodejs中ejs3.0版本的partial is not defined问题

关于Nodejs中ejs3.0版本的partial is not defined问题

本人是nodejs菜鸟，我用的是ejs3.0，听说在3.0中已经把partial函数给去掉了，用include取代？那么include怎么应用呢？ 原partial写法是这样的：<ul><%- partial(‘listitem’,items) %></ul>

直接替换策划那个include写法不对啊，难道要写成 <ul><%- partial listitem,items %></ul> 注：有人说写成这个形式<% include nav %> <!-- replaces your old <%- partial(‘nav’) %> --> 但是我有两个参数啊，求助。。。


13 回复

当然可以！在EJS 3.0 中，partial 函数确实被移除了，并且推荐使用 include 来替代。include 用于包含其他 EJS 模板文件，而不是像以前的 partial 那样传递变量。

解决方案

如果你需要在模板中包含另一个模板文件，并传递多个参数，你可以将这些参数放在一个对象里传递。下面是一个具体的示例：

示例结构

假设你有以下文件结构：

project/
│
├── views/
│   ├── index.ejs
│   └── listitem.ejs
└── app.js

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <h1>List Items</h1>
    <ul>
        <!-- 使用 include 包含 listitem.ejs 文件，并传递一个包含多个参数的对象 -->
        <% include ./listitem { items: items } %>
    </ul>
</body>
</html>

listitem.ejs

<% items.forEach(function(item) { %>
    <li><%= item %></li>
<% }) %>

app.js

const express = require('express');
const ejs = require('ejs');

const app = express();

// 设置视图引擎为 EJS
app.set('view engine', 'ejs');

// 定义路由
app.get('/', (req, res) => {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    res.render('index', { items });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. index.ejs:

    • 使用 <% include ./listitem { items: items } %> 来包含 listitem.ejs 文件。
    • items 参数被传递到 listitem.ejs 中。

  2. listitem.ejs:

    • 使用 forEach 方法遍历传递过来的 items 数组，并生成每个列表项。

  3. app.js:

    • 设置视图引擎为 EJS。
    • 定义了一个简单的路由 /，并将 items 数组传递给 index.ejs 模板。

通过这种方式，你可以顺利地从 partial 过渡到 include，并处理多个参数的传递。


include应该是不用传参数的。当前页面的变量，nav 页面也可以用

.安装express-partials。 方法一：运行cmd用npm install express-partials 方法二：在package.json里面的dependencies添加"express-partials": “*”。然后运行cmd并切换 至项目目录运行npm install获得最新版。 2.app.js里面引用express-partials。 步骤一：添加引用var partials = require(‘express-partials’); 步骤二：在app.set(‘view engine’, ‘ejs’);下面添加app.use(partials()); 3.在需要引用模板的地方调用layout:‘模版名称’ 示例 app.get(’/reg’, function (req, res) { res.render(‘reg’, { title: ‘用户注册’, layout: ‘template’ }); });

你好我安装你上面的添加后为什么还需要在views 文件夹下添加一个 layout.ejs 这个模版 layout.ejs 内容是 <ul><%- partial(‘listitem’,item)%></ul>

为什么要加layout.ejs 这个文件啊，谢谢了

正解

使用forEach，并使用include的替换就好了 <ul> <% items.forEach(function(listitem){ %> <% include listitem %> <% }) %> </ul>

正解～

+1

挺好！

搞不懂，可以使用include为什么还要额外去装express-partial

直接使用include

thX

在 EJS 3.0 版本中，partial 确实被移除了，并且使用 include 来替代。但是 include 的使用方式与 partial 有所不同。

解决方案

如果你需要传递多个参数，可以将这些参数封装到一个对象中，然后通过 include 来引用这个对象。

示例代码

  1. 主模板文件（main.ejs）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Template</title>
</head>
<body>
    <ul>
        <% include listitem.ejs { items: items } %>
    </ul>
</body>
</html>
  1. 子模板文件（listitem.ejs）
<% for (let item of items) { %>
    <li><%= item %></li>
<% } %>
  1. 服务器端代码（app.js）
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const items = ['Apple', 'Banana', 'Orange'];
    res.render('main', { items });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  • 在 main.ejs 中，我们使用 <% include listitem.ejs { items: items } %> 来包含 listitem.ejs 文件，并传递 items 对象。
  • 在 listitem.ejs 中，我们遍历 items 对象并渲染每个项目。
  • 服务器端代码设置视图引擎为 EJS，并在根路由中渲染 main.ejs 模板。

这样，你就可以在 EJS 3.0 中使用 include 来代替 partial，并且能够传递多个参数。

回到顶部