Nodejs ejs 如何动态 include 模板？

Nodejs ejs 如何动态 include 模板？

<% include list.html %>

这是目前的引入方式， 但是，想要每次引入的页面动态化， 也就是， 根据 controllers 返回的数据引入模板， 应该如何写代码？

10 回复

当然可以！在 Node.js 中使用 EJS 模板引擎时，有时需要根据控制器返回的数据动态地包含（include）不同的模板。默认情况下，EJS 不支持直接动态包含模板，但可以通过编写一些辅助函数来实现这一点。

以下是一个简单的示例，展示如何根据控制器返回的数据动态包含模板：

示例代码

  1. 安装 EJS： 首先确保你已经安装了 EJS：

    npm install ejs

  2. 创建基本的服务器： 创建一个基本的 Express 服务器，并设置 EJS 作为视图引擎。

    // server.js
const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  // 假设我们根据某种逻辑决定包含哪个模板
  const templateName = req.query.template || 'list';
  res.render('index', { templateName });
});

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

  3. 创建 EJS 视图文件： 在 views 目录下创建两个文件：index.ejs 和 list.ejs。

    • index.ejs:

      <!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Include Example</title>
</head>
<body>
  <h1>Welcome to the Dynamic Include Example</h1>
  <!-- 动态包含模板 -->
  <%- include(`./${templateName}.ejs`) %>
</body>
</html>

    • list.ejs:

      <!-- views/list.ejs -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

  4. 运行服务器： 运行你的服务器：

    node server.js

  5. 访问并测试： 访问 http://localhost:3000/?template=list，你应该会看到 list.ejs 被动态包含到 index.ejs 中。

解释

  • 服务器逻辑：在服务器中，我们根据查询参数 template 的值决定包含哪个模板。如果没有提供 template 参数，默认包含 list.ejs。

  • EJS 视图：在 index.ejs 中，我们使用 <%- include(./${templateName}.ejs) %> 动态包含模板。${templateName} 是从控制器传递给视图的数据。

通过这种方式，你可以根据服务器端的逻辑动态地包含不同的模板。希望这对您有帮助！


整个模板重新render

include的 模板是已经渲染完毕的。只能重新render

在你incloud页面内写入一个<%=title%>不是就是动态的了吗

ejs支持include ejs文件的呀

貌似要改一下源码 https://github.com/visionmedia/ejs/issues/93

这样可以不？ <% if (true) { %> <% include list.html %> <% } else{%> <% include list2.html %> <% } %>

话说怎么inlcude其他路径下的html模版啊？

<%- include(somePath) %> 最新的已经支持变量了 ejs

要在 Node.js 中使用 EJS 动态地包含不同的模板，你可以通过传递变量给 EJS 渲染函数来实现。下面是一个简单的示例，展示如何根据控制器返回的数据动态包含模板。

首先，确保你已经在项目中安装了 EJS 和 Express：

npm install express ejs

接下来，我们创建一个简单的 Express 应用程序，该应用程序会根据请求参数决定包含哪个模板。

示例代码

app.js

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    // 假设从数据库或任何数据源获取数据
    const templateName = req.query.template || 'default';

    // 动态包含不同模板
    res.render('index', { templateName });
});

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

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EJS Dynamic Include Example</title>
</head>
<body>
<% if (templateName === 'list') { %>
    <% include ./list.ejs %>
<% } else if (templateName === 'form') { %>
    <% include ./form.ejs %>
<% } else { %>
    <h1>No template specified or default template</h1>
<% } %>
</body>
</html>

views/list.ejs

<h2>List Template</h2>
<p>This is the list template content.</p>

views/form.ejs

<h2>Form Template</h2>
<p>This is the form template content.</p>

解释

  1. app.js:

    • 设置 EJS 作为视图引擎。
    • 定义了一个路由处理程序 /，它检查查询参数 template 并将其值存储为 templateName 变量。
    • 使用 res.render 渲染 index.ejs 文件，并将 templateName 传递给模板。

  2. views/index.ejs:

    • 使用条件语句 <% if %>...<% endif %> 根据 templateName 的值动态包含不同的子模板（如 list.ejs 或 form.ejs）。

  3. views/list.ejs 和 views/form.ejs:

    • 包含实际的内容模板。

这样，当你访问 / 并添加查询参数 ?template=list 或 ?template=form 时，将会动态加载相应的模板。如果未指定模板或参数无效，则默认显示 index.ejs 中的默认内容。

回到顶部