EJS渲染Express待办列表时新增列表项仅显示圆点无内容问题

问题根源 #

• EJS输出语法使用错误：模板中用仅执行逻辑不输出的<% %>包裹动态数组，未使用<%= %>将内容渲染到页面
• 数组渲染逻辑错误：后端传入的newListItem是数组类型，直接放在单个<li>标签内无法生成独立的列表项，需要遍历后逐个渲染

修正方案 #

方案1：保留原有固定列表项，动态追加新增内容 #

直接修改EJS模板，替换原来的单个动态<li>为循环渲染逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>To Do List</title>
</head>
<body>
     <h1><%= kindOfDay %></h1>
     <ul>
          <li>Buy Food</li>
          <li>Cook Food</li>
          <li>Eat Food</li>
          <!-- 遍历动态数组生成独立列表项 -->
          <% newListItem.forEach(function(item) { %>
               <li><%= item %></li>
          <% }) %>
     </ul>
     <form action="/" method="post">
          <input type="text" name="newItem">
          <button type="submit" name="button">Add</button>
     </form>
</body>
</html>

方案2：统一管理所有列表项 #

如果希望固定项和动态项统一维护，可同时修改后端初始化代码和模板：

• 后端初始化items数组时加入固定项：

// 替换原有的 let items = [];
let items = ["Buy Food", "Cook Food", "Eat Food"];

• 模板中移除固定的<li>标签，直接循环渲染数组：

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

说明 #

后端的表单接收、数据存储、重定向逻辑本身没有问题，仅修改模板的渲染逻辑即可解决列表项为空的问题。

内容的提问来源于stack exchange，提问作者Arun Bohra