Question

这是来自我的todo mongodb的文件：

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

这是填充待办事项列表页面的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

以上工作正常。待办事项页面按预期显示所有待办事项。

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

所以我的问题是：

我如何编码“完成”＆＃39;哈巴狗页面上的按钮，以便它得到与需要更新的特定文档相关联？
如何在我的index.js上构建POST代码以便它监听按钮单击并执行相关的文档更新？

更新

好的，所以我不太了解kentor的回复（但无论如何，谢谢你！）。我做了一些研究，有些复制和粘贴，我已经把问题向前推了几步 - 我希望。

新的哈巴狗代码：

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(); 
      });
    }
  });
});

现在发生了什么：

点击按钮，带标题的文档＆＃34; Make Smoothie＆＃34;更改为＆＃34;打开＆＃34;：false。所以按钮触发了我想要的改变。砰!但这只是帮助我解决问题的部分解决方案。

我还需要什么：

点击按钮，我想要点击其按钮的文档ID替换{＆＃34; title＆＃34;：＆＃34; make smoothie＆＃34;}以便＆＃34;打开＆＃34;：可以进行虚假更改。类似于{_id：＆＃34;来自按钮等等的文档ID＆＃34;}。

更新2

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

value="#{todo._id}

我应该使用

value=todo._id

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

Answer 1

您可以将数据属性附加到HTML按钮，如下所示：

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

然后，您只需将事件侦听器附加到此按钮，然后发送包含此data-id的POST请求。使用Jquery它可能看起来像这样：

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

Answer 2

我终于解决了它

最后一步，我更换了

{"title": "Make smoothie"}

与

{"_id": ObjectId(req.body._id)}

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

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

2 个答案: