如何使用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元素中，然后使用它来修改会话中的一个键，但能够触发事件会更加"DRY"。

- MrColes

---

这个问题在五月份已经有答案了：https://dev59.com/A2PVa4cB1Zd3GeqP-vqE - Werner Kvalem Vesterås

@WernerVesterås：他在第二句话中链接了那个问题。 :-) - Rahul

@Rahul 早上太早了... :-P - Werner Kvalem Vesterås

Answer 1

显然，现在可以使用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非常容易地结合使用。

- Donuts

Answer 2

目前，Meteor似乎不支持自定义事件，但您总是可以使用jQuery（或其他工具）创建自定义事件，然后使用模板上的rendered事件确保它们重新附加到其各自的元素上:

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

- Rahul

---

为什么在启动时调用attachEvents是必要的？它不是总是会在rendered中被调用吗？ - Erlend V

Answer 3

点击 #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');
  }
})

- Michael Cole

Answer 4

Meteor会像jQuery一样响应事件（假设已安装）

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

- Artur