म्यूटूल के बराबर JQuery समतुल्य (यह)

Question

मैं इस class plugin का उपयोग कर JQuery में एक Mootools टूलटिप क्लास को फिर से लिखने की कोशिश कर रहा हूं। जब मेरी कक्षा को तुरंत चालू किया जाता है तो मैं एक ईवेंट श्रोता को एक लक्षित लिंक से जोड़ रहा हूं जो टूलटिप को फीका कर देगा।

घटना कॉलबैक में JQuery घटना के लक्ष्य पर "यह" कीवर्ड निर्दिष्ट करता है, इसलिए कक्षा के गुणों का संदर्भ देने के लिए "इस" को सेट करने के लिए क्लास के गुणों का संदर्भ रखने के लिए मैं() "का उपयोग कर रहा हूं। यह स्पष्ट रूप से Mootools के आसान bind() फ़ंक्शन के JQuery में समकक्ष है।

दुर्भाग्यवश जब मैं लागू करता हूं() मैं कॉलबैक के ईवेंट पैरामीटर को खो देता हूं। उदाहरण के लिए, इस बिट में मुझे दूसरी पंक्ति पर "ई अनिर्धारित" त्रुटि मिलती है।

this.target.bind('click', function(e){ 
    e.preventDefault(); 
    var tip = this.opts.tip; 
    tip.fadeOut(500, function(){ 
     tip.bind('click', function(){ 
      showing = false; 
     }) 
    }); 
}.apply(this)) 

क्या मुझे यहां एक चाल याद आ रही है? क्या कोई इस मुद्दे के आसपास एक रास्ता जानता है?

धन्यवाद फ्रेड

Answer 1

की ओर इशारा करते होना चाहिए

टीबीएच, mootools.bind जैसा कि आप इसे कॉल करते हैं, यह केवल ईएस 5 में Function.bind है - और जेएस 1.8.5 + spec का समर्थन करने वाले ब्राउज़र में मूल रूप से उपलब्ध है। MooTools केवल उन ब्राउज़रों को बढ़ाता है जिनके पास अभी तक नहीं है लेकिन मूल कार्यान्वयन प्रोटोटाइप पर उपलब्ध होने देता है - यदि उपलब्ध हो।

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

आप आसानी से आ Function.prototype.bind डेकोरेटर नहीं तो उपलब्ध देशी रूप के रूप में है कि लागू करने और इसका इस्तेमाल कर सकते हैं के रूप में उपरोक्त उदाहरण का कहना है:

// Function.prototype.bind polyfill 
if (!Function.prototype.bind) { 

    Function.prototype.bind = function(obj) { 
    if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function 
     throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); 

    var slice = [].slice, 
     args = slice.call(arguments, 1), 
     self = this, 
     nop = function() {}, 
     bound = function() { 
      return self.apply(this instanceof nop ? this : (obj || {}), 
           args.concat(slice.call(arguments)));  
     }; 

    bound.prototype = this.prototype; 

    return bound; 
    }; 
} 

आप देख सकते हैं, यह एक की तुलना में थोड़ा अधिक शामिल है सरल .apply/.call

विचार करने की एक बात यह है कि, यदि आपको बांध का उपयोग करने की आवश्यकता है या आप इसके बजाय संदर्भ सहेज सकते हैं।

उदाहरण के लिए।

var self = this; 
this.target.bind("click", function(e) { 
    var tip = self.opts.tip; 
}); 

इस पर फ़ंक्शन बाध्यकारी की तुलना में इसका एक छोटा पदचिह्न है। यह आपको ट्रिगर तत्व (event.target === this) के रूप में this का सही संदर्भ भी प्रदान करता है।

this.element.addEvents({ 
    click: this.showTip.bind(this), 
    mouseleave: this.hideTip.bind(this) 
}); 

इस मामले में, बचत एक संदर्भ जीता ': जब आप वर्ग के तरीकों, जैसे करने के लिए घटनाओं प्रदान करना चाहते हैं, हालांकि बाँध अक्सर की जरूरत है - आप बाँध एक से mootools कोर में कहीं अधिक अक्सर इस पैटर्न मिलेगा http://api.jquery.com/jquery.proxy/

Answer 2

सभी घटनाओं, कि कुछ तत्व पर किया जाता है (उदाहरण के लिए 'क्लिक' उनमें से एक है) लक्ष्य संपत्ति उस तत्व

var $this = $(e.target); // $this will be the clicked element 

JSFiddle