Jak wywołać zdarzenie niestandardowe z Meteorsem JS

Question

Czy można wywołać niestandardowe wydarzenie z Meteorytem? Widzę, że wyzwalanie niestandardowych zdarzeń jquery nie działa, ponieważ zdarzenia Meteor są oddzielne od jQuery (as discussed here).

Więc gdybym miał coś takiego:

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

Byłoby miło gdybym mógł zrobić coś wzdłuż linii:

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

Moje bieżące obejście jest tylko przechowywać identyfikator Chcę jako data-id="{{_id}}" na elemencie dom, a następnie użyć go, aby zmodyfikować klucz w sesji, ale będąc w stanie wyzwolić wydarzenie czuje się bardziej "SUCHA".

Answer 1

Meteor obecnie nie obsługuje zdarzeń niestandardowych, ale zawsze można po prostu użyć jQuery (lub cokolwiek chcesz) do tworzenia zdarzeń niestandardowych, a następnie upewnić się, że są one ponownie dołączane do odpowiednich elementów za pomocą zdarzenie rendered na szablonach:

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

Answer 2

Podobno to działa teraz przy użyciu jQuery zdarzenia wyzwalającego i składnię słuchania standardowy zdarzeń Meteor. Patrząc na kod na karuzeli Bootstrap, emituje niestandardowe zdarzenie jQuery w następujący sposób:

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

I pomyślnie słuchał tego wydarzenia, wykonując:

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

byłem mile zaskoczony, jak łatwo zdarzenia Bootstrap (jQuery) zazębiały się z Meteorem.

Answer 3

Meteor reaguje kiedy wyzwalać zdarzenia sposób jQuery (zakładając jego zainstalowaniu)

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

Answer 4

Kliknięcie #showOffered ustawia się #searchFilter do szczególnej wartości i filtruje wyniki (nie pokazane):

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

Wydarzenia te sprawdziły się u mnie. Kliknięcie ustawia wartość i wyzwala zdarzenie wejściowego, który filtruje wyniki (nie pokazany):

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