Cách kích hoạt sự kiện tùy chỉnh bằng Meteor js

Question

Có thể kích hoạt sự kiện tùy chỉnh bằng Meteor không? Tôi thấy rằng việc kích hoạt các sự kiện jquery tùy chỉnh không hoạt động, vì các sự kiện Meteor tách biệt với jQuery (as discussed here).

Vì vậy, nếu tôi có một cái gì đó như:

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

Nó muốn được tốt đẹp nếu tôi có thể làm điều gì đó dọc theo dòng:

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

workaround hiện tại của tôi là chỉ cần lưu trữ các id Tôi muốn là data-id="{{_id}}" trên phần tử dom và sau đó sử dụng điều đó để sửa đổi một khóa trong Phiên, nhưng có thể kích hoạt sự kiện cảm thấy nhiều hơn "KHỬ".

Answer 1

Meteor dường như không hỗ trợ các sự kiện tùy chỉnh vào lúc này, nhưng bạn luôn có thể sử dụng jQuery (hoặc bất kỳ thứ gì bạn muốn) để tạo sự kiện tùy chỉnh, và sau đó đảm bảo chúng được gắn lại với các phần tử tương ứng của chúng sự kiện rendered trên Mẫu:

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

Answer 2

Rõ ràng điều này hiện hoạt động bằng cách sử dụng cú pháp sự kiện Meteor chuẩn và cú pháp nghe sự kiện chuẩn. Nhìn vào mã cho băng chuyền Bootstrap, nó phát ra một sự kiện jQuery tùy chỉnh bằng cách làm như sau:

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

tôi thành công nghe sự kiện này bằng cách thực hiện:

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

tôi đã ngạc nhiên như thế nào một cách dễ dàng sự kiện Bootstrap (jQuery) được chia lưới với Meteor.

Answer 3

Meteor phản ứng khi bạn kích hoạt sự kiện cách jQuery (giả sử cài đặt của nó)

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

Answer 4

Nhấp #showOffered bộ các #searchFilter đến một giá trị đặc biệt và lọc các kết quả (không hiển thị):

<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> 

Những sự kiện này làm việc cho tôi. Bấm đặt giá trị và gây nên sự kiện đầu vào để lọc kết quả (không hiển thị):

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