Question

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

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

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

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

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

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

4 个答案: