Come attivare un evento personalizzato con Meteor js

Question

È possibile attivare un evento personalizzato con Meteor? Vedo che l'attivazione di eventi jquery personalizzati non funziona, poiché gli eventi Meteor sono separati da jQuery (as discussed here).

Quindi, se ho avuto qualcosa di simile:

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

Sarebbe bello se potessi fare qualcosa sulla falsariga di:

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

mia soluzione attuale è quella di memorizzare solo l'id che Voglio come data-id="{{_id}}" sull'elemento dom e quindi usarlo per modificare una chiave nella Session, ma essere in grado di attivare l'evento sembra più "SECCO".

Answer 1

Meteor non sembra supportare eventi personalizzati al momento, ma puoi sempre usare solo jQuery (o qualsiasi altra cosa tu voglia) per creare eventi personalizzati, e quindi assicurarti che siano riapplicati ai loro rispettivi elementi con l'evento rendered su Modelli:

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

Answer 2

a quanto pare questo ora funziona utilizzando jQuery evento scatenante e la sintassi di ascolto evento Meteor standard. Guardando il codice per il carosello Bootstrap, emette un evento jQuery personalizzato effettuando le seguenti operazioni:

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

ho con successo ascoltato a questo evento facendo:

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

sono rimasto piacevolmente sorpreso dalla facilità gli eventi Bootstrap (jQuery) ingranati con Meteor.

Answer 3

Meteor reagisce quando si attiva eventi il ​​modo jQuery (assumendo la sua installati)

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

Answer 4

Cliccando #showOffered imposta la #searchFilter per un valore speciale e filtra i risultati (non mostrate):

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

Questi eventi hanno funzionato per me. Clicca imposta il valore e attiva l'evento di ingresso che filtra i risultati (non mostrato):

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