片段视图

2021-07-14 00:10:48 EXPRESS 大约 1 分钟

Express 的视图系统还支持片段视图(partials),它就是一个页面的片段,通常是重复的内容,用于迭代显示。通过它你可以将相对独立的页面块分割出去,而且可以避免显式地使用 for 循环。但是在3.x版本及以后就移除掉了这个功能,所以这个时候你就需要替代方案。这里我只介绍4.x版本使用的include,另外一中方法请移步至:NodeJS - Express 3.0下ejs模板使用 partial展现 片段视图 (opens new window)

让我们看一个例子,在 userlist.js 中新增以下内容:

router.get('/list', function (req, res) {
    res.render('list', {
        title: 'List',
        items: [1991, 'byvoid', 'express', 'Node.js']
    });
});
1
2
3
4
5
6

在 views 目录下新建 views/list.ejs,内容是:

<ul>
    <% items.forEach(function(user){ %>
        <%- include('./listitem', { listitem: user }); %>
    <% }); %>
</ul>
1
2
3
4
5

同时新建 views/listitem.ejs,内容是:

<li><%= listitem %></li>
1

浏览器访问:http://localhost:3000/userlist/list,浏览器会响应如下内容:

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
    <ul>
    
      <li>1991</li>
    
      <li>byvoid</li>
    
      <li>express</li>
    
      <li>Node.js</li>
    
  </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

include是ejs提供的指令,通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如,如果存在 "./views/list.ejs" 和 "./views/listitem.ejs" 两个模板文件,你可以通过 <%- include('./listitem'); %> 代码包含后者。

上次编辑于: 2023年7月4日 09:36