尝试通过pug/node.js按钮单击更新mongodb文档字段

这是我的todo mongodb中的一个文档：

"_id" : ObjectId("5a1e96f856f24c43b886eb54"),
"title" : "Drink coffee",
"note" : "Tomorrow morning",
"open" : true,
"duedate" : "2017-12-03"

这是填充todo列表页面的pug代码

each todo in todolist
   if todo.open
      div
         a(href="#") #{todo.title}
      div
         p(style='white-space:pre;')
          |   #{todo.note}
          |   Due: #{todo.duedate}
          button(id="doneButton") Done

以上方法很好。todo页面按预期显示所有todo项目

我想做的是： 当用户单击“完成”按钮时，我想将该特定文档更新为“打开”：false。 （我希望在单击时执行此操作，而不是通过使用“编辑”按钮将项目加载到新的编辑页面上。当todo list页面重新加载时，该todo项目将从列表中删除。我不希望删除该文档，因为我需要稍后将其存档。）

因此，我的问题是：

• 如何在帕格页面上对“完成”按钮进行编码，使其 是否与需要更新的特定文档关联
• 如何在index.js上构造POST代码，以便它侦听 单击按钮并执行相关文档更新

更新

好吧，所以我不太明白肯特的回答（不过还是要谢谢你！）。不过，我做了一些研究，并进行了一些复制和粘贴，我希望我已经将这个问题向前推进了两步

新的帕格代码：

each todo in todolist
   if todo.open
      a(href="#") #{todo.title}
      p #{todo.note}
      p Due: #{todo.duedate}
      form#form_update_item(name="updateitem", method='post', action='/updateitem')
      input#input_name(type="hidden", placeholder="", name="_id", value="#{todo._id}")
      button(type="submit") Done

index.js代码

router.post('/updateitem', function(req, res) {
  var MongoClient = mongodb.MongoClient;

  var ObjectId = require('mongodb').ObjectId;

  var url = 'mongodb://localhost:27017/tododb';

  MongoClient.connect(url, function(err, db) {
    if (err) {
      console.log("can't connect", err);
    }
    else {
      console.log('Connected to server. Woohoo!');

      var collection = db.collection('todolist');

      collection.findOneAndUpdate(
        {"title": "Make smoothie"}, 
        {
        $set: {
          "open": false
          }
        }, 
        function(err, result) {
          if (err) {
              console.log(err);
          } else {
              res.redirect("todolist");
          }
          db.close(); 
      });
    }
  });
});

现在发生了什么：

• 点击按钮，标题为“制作冰沙”的文档更改为“打开”：false。所以按钮触发了我想要的改变。猛敲但这只是帮助我隔离问题的部分解决方案

我仍然需要：

• 在点击按钮时，我希望其按钮被点击的文档ID替换{“title”：“makesmoothie”}，以便可以进行“open”：false更改。类似于{u id:“doc id来自按钮等等”}

更新2

发现我使用的是Jade语法而不是Pug，所以用这个代替

value="#{todo._id}

我应该用

value=todo._id

---

因此现在index.js可以console.log帕格表单传递的ID。最后一个挑战是如上所述使用该ID更改相应的mongodb文档

您可以像这样将数据属性附加到HTML按钮：

button(id="doneButton", data-id=todo._id) Done

.script
  $('#doneButton').on("click", function (element) {
    var data = $(this).data("id");
    $.ajax({
      type: "POST",
      url: "your-url",
      data: { todoId: data },
      success: responseHandler
    })
  })

然后，您只需将事件侦听器连接到此按钮，并发送包含此数据id的POST请求。使用Jquery，它可能如下所示：

button(id="doneButton", data-id=todo._id) Done

.script
  $('#doneButton').on("click", function (element) {
    var data = $(this).data("id");
    $.ajax({
      type: "POST",
      url: "your-url",
      data: { todoId: data },
      success: responseHandler
    })
  })

---

我终于解决了它

最后一步，我换了

{"title": "Make smoothie"}

与

果然，每次我点击一个按钮，服务器都会更新相应文档的“打开”：false