So lösen Sie ein benutzerdefiniertes Ereignis mit Meteor aus js

Question

Ist es möglich, ein benutzerdefiniertes Ereignis mit Meteor auszulösen? Ich sehe, dass das Auslösen von benutzerdefinierten jQuery-Ereignissen nicht funktioniert, da die Meteor-Ereignisse von jQuery getrennt sind (as discussed here).

Also, wenn ich hatte so etwas wie:

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

Es wäre schön, wenn ich etwas entlang der Linien von tun kann:

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

Meine aktuelle Problemumgehung nur zu speichern, die ID, Ich möchte als data-id="{{_id}}" auf dem DOM-Element und dann verwenden, um einen Schlüssel in der Sitzung zu ändern, aber in der Lage, das Ereignis auszulösen fühlt sich mehr "trocken".

Answer 1

Meteor scheint im Moment keine benutzerdefinierten Ereignisse zu unterstützen, aber Sie können jQuery (oder was auch immer Sie wollen) einfach verwenden, um benutzerdefinierte Ereignisse zu erstellen, und dann sicherstellen, dass sie mit ihren jeweiligen Elementen wieder verbunden werden die rendered Veranstaltung auf Vorlagen:

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

Answer 2

Anscheinend jetzt das funktioniert jQuery Ereignis mit Trigger- und Standard Meteor Ereignis wartet Syntax. Mit Blick auf den Code für das Karussell Bootstrap, gibt es eine benutzerdefinierte jQuery-Ereignis durch die folgenden Schritte ausführen:

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

ich erfolgreich auf dieses Ereignis hörte, indem Sie:

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

ich war angenehm überrascht, wie leicht Die Bootstrap-Ereignisse (jQuery) wurden mit Meteor gematcht.

Answer 3

Meteor reagiert, wenn Sie Ereignisse die jQuery Weg (vorausgesetzt, seine installierte) auslösen

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

Answer 4

Klicken auf #showOffered setzt den #searchFilter auf einen speziellen Wert und filtert die Ergebnisse (nicht dargestellt):

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

Diese Ereignisse haben für mich funktioniert. Klicken Sie setzt den Wert und löst das Eingabeereignis, das die Ergebnisse Filter (nicht dargestellt):

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