在 Meteor 的弹出窗口中记录重复的管理表单提交

Question

我的 Meteor 应用程序有一个弹出窗口，其中列出了团队成员完成的任务。团队成员只需打开弹出窗口、填写输入字段然后按下回车键，即可发出新任务完成的信号。碰巧，由于某种原因，表单提交事件被触发了不止一次，然后我在 Mongodb.

中得到了重复的记录

这是我的代码：

Template.header.onRendered(function() {
  $("#sneak-preview-btn").popover({
    container: 'body',
    template: '<div class="popover work-journals-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
    animation: true,
    placement : 'right',
    html : true,
    delay: { "show": 500, "hide": 100 },
    trigger : 'manual',
    content : function() {
      var popTitle = "<h5>Peek last 5 activities completed by your team mates.</h5>";
      var formAddEntry = "<form id='add-entry'><div class='form-group'><input id='entry' name='entry' type='text' class='form-control' placeholder='Add a new task you completed'/></div></form>";
      var entriesLimit = 5;
      var htmlEntryList = "";
      var myEntries =  WorkJournals.find({userId : Meteor.userId()}, {sort : {createdAt : -1}, limit : entriesLimit}).fetch();

      if (myEntries) {
        htmlEntryList ="<div class='scroll-journal-entries'><ul>";
        myEntries.map(function(en) {
          htmlEntryList += libGetHtmlJournalEntry(en);
        });
        htmlEntryList += "</ul>";
        var companyUsers = Profiles.find({companyId : libGetCompanyIdFromUser(Meteor.userId())}, {fields : {userId : 1}}).fetch();
        companyUsers.filter(function(user) {
          if (user.userId !== Meteor.userId())
            htmlEntryList += libGetHtmlJournalEntries(user.userId, entriesLimit);
        });

        htmlEntryList += "</div>";
      }
      return "<div>" + popTitle + formAddEntry + "<p>" + htmlEntryList + "</p><button id='close-sneak-preview' type='button' class='btn btn-default btn-xs pull-right'>Close</button><br>" + "</div>";
    }
  });
  //manage lost focus
  $(document).on('blur', '.popover', function(e) {
    e.preventDefault();
    $("#sneak-preview-btn").popover('hide');
  });

  //manage submit
  $(document).on('submit', '#add-entry', function(e) {
    e.preventDefault();
    WorkJournals.insert({
      companyId: Profiles.findOne({userId : Meteor.userId()}).companyId,
      userId : Meteor.userId(),
      entryText : $('#entry').val(),
      createdAt : new Date().getTime()
    });
    $("#sneak-preview-btn").popover('hide');
    libShowAlert('messages-heading-row', 'A completed task was added to your activity log', 'alert-nice');
  });

  $(document).on('click', "#close-sneak-preview", function() {
    $("#sneak-preview-btn").popover('hide');
  });
});

Answer 1

我觉得这不是很流星。您有模板，但在文档中注册事件？会不会是在你的 header 模板的多次渲染中 $(document) 事件累积，所以你最终得到一整条链？

在 Meteor 的弹出窗口中记录重复的管理表单提交

Records duplicated managing form submit within a popover from Meteor

popover

twitter-bootstrap

meteor