मेटीर जेएस

Question

के साथ एक कस्टम ईवेंट ट्रिगर कैसे करें मेटर के साथ एक कस्टम ईवेंट ट्रिगर करना संभव है? मैं देखता हूं कि कस्टम jquery घटनाओं को ट्रिगर करना काम नहीं करता है, क्योंकि उल्का घटनाएं jQuery से अलग हैं (as discussed here)।

तो अगर मैं कुछ ऐसा था:

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

यह अगर मैं की तर्ज पर कुछ कर सकते हैं अच्छा होगा:

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

मेरे वर्तमान वैकल्पिक हल सिर्फ आईडी स्टोर करने के लिए है कि मैं डोम तत्व पर data-id="{{_id}}" के रूप में चाहता हूं और उसके बाद सत्र में एक कुंजी को संशोधित करने के लिए इसका उपयोग करता हूं, लेकिन ईवेंट को ट्रिगर करने में सक्षम होने से अधिक "DRY" लगता है।

Answer 1

उल्का इस समय कस्टम घटनाओं का समर्थन नहीं कर रहा है, लेकिन आप कस्टम ईवेंट बनाने के लिए हमेशा jQuery (या जो कुछ भी चाहते हैं) का उपयोग कर सकते हैं, और फिर सुनिश्चित करें कि वे अपने संबंधित तत्वों से फिर से जुड़े हुए हैं पर टेम्पलेट्स rendered घटना:

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

Answer 2

जाहिर है यह अब jQuery घटना को ट्रिगर और मानक उल्का घटना वाक्य रचना सुनने का उपयोग कर काम करता है। बूटस्ट्रैप हिंडोला के लिए कोड को देखते हुए, यह ऐसा करके एक कस्टम 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... 
    } 
}); 

मैं सुखद पर कितनी आसानी से हैरान था बूटस्ट्रैप (jQuery) घटनाओं उल्का के साथ meshed।

Answer 3

उल्का प्रतिक्रिया करते हैं जब आप घटनाओं jQuery रास्ता (यह मानते हुए इसकी स्थापित)

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