流星覆盖包中元素的点击事件

Question

我正在尝试覆盖 autoform-remove-item 按钮的按钮单击事件，如下所示，因为我正在尝试显示一条警告消息（之前）用户可以删除 Autoform 数组中的任何项目。然后，如果用户确认删除项目，则按钮单击事件应正常继续。但是我无法弄清楚如何以暂停按钮下方代码（我无权访问）的方式覆盖按钮的点击事件，直到用户确认/拒绝删除？有什么帮助我可能在这里遗漏的吗？谢谢

    Template.salesInvoice.events({
       'click .autoform-remove-item': function(e){

            e.preventDefault();

            bootbox.dialog({
              message: "Are you sure you wish to delete this item?",
              title: "New Journal",
              buttons: {
                eraseRecord: {
                  label: "Yes!",
                  className: "btn-danger",
                  callback: function() {

                  }
                },
                doNotEraseRecord: {
                  label: "No!",
                  className: "btn-primary",
                  callback: function() {
                    //Continue with the normal button click event                

                  }
                }

              }
            });
       }

    });

我试图覆盖的点击事件：

      'click .autoform-remove-item': function autoFormClickRemoveItem(event, template) {
        var self = this; // This type of button must be used within an afEachArrayItem block, so we know the context

        event.preventDefault();

        var name = self.arrayFieldName;
        var minCount = self.minCount; // optional, overrides schema
        var maxCount = self.maxCount; // optional, overrides schema
        var index = self.index;
        var data = template.data;
        var formId = data && data.id;
        var ss = AutoForm.getFormSchema(formId);

        // remove the item we clicked
        arrayTracker.removeFromFieldAtIndex(formId, name, index, ss, minCount, maxCount);
      },

Answer 1

在运行转了一个小时左右后，这就是我发现的。 Blaze 在 templateInstance 的父元素中安装它的事件监听器。存储它们的属性称为 $blaze_events。它易于使用，但没有记录。使用方法如下：

正在检索事件处理程序

处理程序存储在一个数组中 ($blaze_events.handlers)。所以为了找到一个特定的我写了这个函数：

retrieveBlazeEvent = function retrieveBlazeEvent (parentElement, eventType, selector) {
  var returnHandler
  parentElement.$blaze_events[eventType].handlers.forEach(function (eventHandler) {
    if(eventHandler.selector === selector)
      return (returnHandler = eventHandler) && false
  })
  return returnHandler
}

用法：

client/test.html

<template name="test">
  <p>Hi!</p>
</template>

client/main.html

client/main.js

Template.test.events({
  'click p': function () {
    console.log('PIII')
  }
})

retrieveBlazeEvent(document.body, 'click', 'p')

删除事件侦听器

retrieveBlazeEvent 返回的事件处理程序有一个函数 unbind。所以这是一个例子

retrieveBlazeEvent(document.body, 'click', 'p').unbind()

调用此函数后，事件处理程序仍会存在。要还原它，您只需在同一对象上调用 bind。

手动触发事件处理程序

假设我们有一个简单的 p 元素。正在侦听点击事件：

Template.test.events({
  'click p': function () {
    console.log('PIII')
  }
})

要触发事件处理程序，我们需要一个与此选择器匹配的 p 元素。我们还需要模板实例来检索正确的父节点。然后我们需要以视图作为其上下文来调用事件处理程序。我们还需要为事件绑定创建一个存根，其中包含 currentTarget。此功能为您完成所有这些工作：

triggerEvent = function triggerEvent (eventType, elementSelector, context) {
  var context = context || document
  var element = context.querySelector(elementSelector)
  var eventStub = {
    currentTarget: element
  }
  var view = Blaze.getView(element)
  retrieveBlazeEvent(view._domrange.parentElement, eventType, elementSelector)
    .delegatedHandler
    .call(view, eventStub)
  return true
}

Answer 2

你不能在删除集合的代码中显示bootbox confirm吗？然后只有在用户确认后才将其从集合中移除。例如，我认为这应该有所帮助：

  'click .autoform-remove-item': function autoFormClickRemoveItem(event, template) {
        bootbox.dialog({
          message: "Are you sure you wish to delete this item?",
          title: "New Journal",
          buttons: {
            eraseRecord: {
              label: "Yes!",
              className: "btn-danger",
              callback: function() {
                  var self = this;
                  var name = self.arrayFieldName;
                  var minCount = self.minCount; // optional, overrides schema
                  var maxCount = self.maxCount; // optional, overrides schema
                  var index = self.index;
                  var data = template.data;
                  var formId = data && data.id;
                  var ss = AutoForm.getFormSchema(formId);
                  arrayTracker.removeFromFieldAtIndex(formId, name, index, ss, minCount, maxCount);
              }
            },
            doNotEraseRecord: {
              label: "No!",
              className: "btn-primary",
              callback: function() {
                //Continue with the normal button click event                

              }
            }

          }
        });
   }
  }

Answer 3

您可以使用 stopPropagation 来阻止事件冒泡到自动形成挂钩。

所以简短的版本：

Template.afArrayField.events({
  'click .autoform-remove-item': function(event) {
      if (!confirm('Are you sure you wish to delete this item?')) {
          event.stopPropagation()
      }
  }
})

流星覆盖包中元素的点击事件

Meteor override the click event of an element in a package

javascript

meteor

meteor-autoform

正在检索事件处理程序

删除事件侦听器

手动触发事件处理程序