events - 如何使用 Meteor js 触发自定义事件

Question

是否可以使用 Meteor 触发自定义事件？我看到触发自定义 jquery 事件不起作用，因为 Meteor 事件与 jQuery 是分开的（如此处所述）。

所以如果我有类似的东西：

Template.foo.events({
    'mouseenter .box, makeSelected .box': function() { ... }
})

如果我可以按照以下方式做一些事情，那就太好了：

Meteor.trigger($('.box')[0], 'makeSelected')

我目前的解决方法是将我想要的 id 存储在data-id="{{_id}}"dom 元素上，然后使用它来修改 Session 中的键，但是能够触发事件感觉更“干”。

Answer 1

Meteor 目前似乎不支持自定义事件，但您始终可以使用 jQuery（或任何您想要的）创建自定义事件，然后确保rendered通过模板上的事件将它们重新附加到各自的元素：

Template.foo.rendered = function() {
  attachEvents();
}

Answer 2

显然，这现在可以使用 jQuery 事件触发和标准 Meteor 事件监听语法。查看 Bootstrap 轮播的代码，它通过执行以下操作发出自定义 jQuery 事件：

var slideEvent = $.Event('slide.bs.carousel', {
    // event state
})
this.$element.trigger(slideEvent)

我通过以下方式成功收听了此事件：

Template.carousel.events({
    'slide.bs.carousel': function (event, template) {
        // event handler code here...
    }
});

Bootstrap (jQuery) 事件与 Meteor 的结合让我感到惊喜。

Answer 3

Meteor 在您以 jQuery 方式触发事件时做出反应（假设已安装）

$('.box').mouseenter();

Answer 4

单击#showOffered将 设置#searchFilter为特殊值并过滤结果（未显示）：

<template name="brokerProducts">
            <div class="input-group">
              <input id="searchFilter" type="text" class="filter form-control" placeholder="Search for ..." value="{{filterValue}}">
              <span id="showOffered" class="btn input-group-addon">Show Offered</span>
            </div>
</template>

这些事件对我有用。单击设置值并触发过滤结果的输入事件（未显示）：

Template.brokerProducts.events({
  'input .filter': (event, templateInstance) => {
    templateInstance.filter.set(event.currentTarget.value);
  },
  'click #showOffered': (event, templateInstance) => {
    $('input#searchFilter').val('show:offered').trigger('input');
  }
})