时间戳

首页 > 解决方案 > 使用 ejs 渲染列表项

node.js - 使用 ejs 渲染列表项

问题描述

这是我写的javascript代码

// jshint esversion: 6

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

let items = [];

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));

app.get('/', function(req, res) {
     const today = new Date();

     let options = {
          weekday: 'long',
          day: 'numeric',
          month: 'long'
     };

     let day = today.toLocaleDateString('en-US', options);

     res.render('list', { kindOfDay: day, newListItem: items });
});

app.post('/', function(req, res) {
     let item = req.body.newItem;

     items.push(item);

     res.redirect('/');
});

app.listen(3000, function() {
     console.log('The server started at port 3000');
});

这是我的 ejs 代码

<!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>
          <li> <% newListItem %> </li>
     </ul>

     <form action="/" method="post">
          <input type="text" name="newItem">
          <button type="submit" name="button">Add</button>
     </form>
</body>
</html>

问题是，当我启动我的服务器并尝试在列表中添加一个新的列表项时，它没有显示任何错误，但它什么也没显示，除了一个 li 通过显示一个点就在那里。

进入列表项后的网页

标签： node.jsexpressejs

解决方案

问题是你总是在渲染<li></li>元素，不管你是否真的有newListItem（因此是空点样式）。仅当存在 li 元素时，您才需要有条件地呈现newListItem.

<ul>
   <li>Buy Food</li>
   <li>Cook Food</li>
   <li>Eat Food</li>
   <%if (newListItem) { %>
      <li> <%= newListItem %> </li>
   <% } %>

</ul>

EJS 是一个非常容易使用的模板框架。您可以随时搜索“EJS 条件”、“EJS for loop”等来查看如何显示您的数据。

推荐阅读