列出节点中的应用程序 - 我没有收到任何错误,但仍然没有渲染。列表中的项目应移动到同一页面上的“完成列表”中,但未发生

Lists app in node- I get no errors but still not rendering . Item in the list should be moved into Done List on the same page but it's not happening

提问人:Mads 提问时间:11/16/2023 更新时间:11/16/2023 访问量:14

问:

我在节点中有一个待办事项列表应用程序 - 使用 express 和 mongoose。我试图做的是在创建项目后将项目添加到同一页面上的新列表中。这些项目应具有移动到另一个完成列表的选项。该列表将在同一页面上创建。当我单击“移动到完成列表”时,没有任何反应。这些项目不会呈现在“完成列表”的页面上。我没有收到任何错误。folderList.ejs 是这样的:

<ul>
  <% folderLists.forEach(folderList => { %>
  <li>
    <%= folderList.name %>
    <!-- Form to delete items from the list -->
    <form action="/folderLists/<%= folder._id %>/deleteItem/<%= folderList._id %>"  method="post" style="display: inline;">
        <button type="submit">Delete</button>
    </form>
    
    <!-- Form to move item to Done List -->
    <form action="/folderLists/<%= folder._id %>/moveToDone/<%= folderList._id %>" method="post" style="display: inline;">
        <button type="submit">Move to Done List</button>
    </form>
  </li>
<% }); %>
<h2>Done List</h2>
<ul>
 <% folderLists.forEach(folderList => { %>
     <% if (folderList.checked) { %>
         <li>
             <%= folderList.name %>
             <!-- Additional actions if needed -->
         </li>
     <% } %>
 <% }); %>
<a href="/mainFolder">Go back to Main Folders</a>.   

文件夹列表.js路由:

const express = require('express');
const router = express.Router();
// Import the Folder and Task models
const Folder = require('../models/folder');
const FolderList = require('../models/folderList');
router.get('/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const folder = await Folder.findById(id);
    // Fetch all items for the given folder ID
    const allItems = await FolderList.find({ folder: id });
    console.log('allItems:', allItems);  
    const folderLists = allItems.filter(item => !item.checked);
    console.log('folderLists:', folderLists);
    res.render('folderLists', { folder, folderLists });
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});

将项目添加到列表

router.post('/:id/addItem', async (req, res) => {
  try {
    const { id } = req.params;
    const { itemName } = req.body;
    await FolderList.create({ name: itemName, folder: id });
    res.redirect(`/folderLists/${id}`);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

从列表中删除项目

router.post('/:id/deleteItem/:itemId', async (req, res) => {
  try {
    const { itemId } = req.params;
    await FolderList.findByIdAndDelete(itemId);
    res.redirect(`/folderLists/${req.params.id}`);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

将项目添加到“完成列表”

router.post('/:id/moveToDone/:itemId', async (req, res) => {
  try {
      const { itemId } = req.params;
      console.log('Item ID:', itemId);
      // Find the item by ID
      const folderList = await FolderList.findById(itemId);
      console.log('Folder List:', folderList);
      // Update the item to mark it as checked
      folderList.checked = true;
      await folderList.save();
      console.log('Item moved to Done List successfully.');  // Add this line
      res.redirect(`/folderLists/${req.params.id}`);
  } catch (err) {
      console.error('Error moving item to Done List:', err);
      res.status(500).send(err.message);
  }
});
module.exports = router;

这是folderList.js的模型:

const mongoose = require('mongoose');

const folderListSchema = new mongoose.Schema({
  name: { type: String, required: true },
  folder: { type: mongoose.Schema.Types.ObjectId, ref: 'Folder', required: true },
});
const FolderList = mongoose.model('FolderList', folderListSchema);
module.exports = FolderList;

当我单击“移动到完成列表”时,没有任何反应。这些项目不会呈现在“完成列表”的页面上。我没有收到任何错误。

节点 .js 快速 路由 EJS

评论


答:

0赞 juliushuck 11/16/2023 #1

应更新 folderListSchema,以确保架构包含选中字段。也许这就是它不起作用的原因?

const folderListSchema = new mongoose.Schema({
  name: { type: String, required: true },
  folder: { type: mongoose.Schema.Types.ObjectId, ref: 'Folder', required: true },
  checked: { type: Boolean, default: false }
});

评论

0赞 Mads 11/17/2023
谢谢!!!它绝对帮助我确定了问题所在!修改架构后,我修改了渲染逻辑以处理我想要的路由和 ejs 和 .....res.render('folderLists', { folder, checkedItems, uncheckedItems });它有效!