एक jQuery ईवेंट

Question

में 'इस' के मान को नियंत्रित करना मैंने jQuery का उपयोग करके 'नियंत्रण' बनाया है और इसे जितना संभव हो उतना ओओ बनाने में सहायता के लिए jQuery.extend का उपयोग किया है।

मेरे नियंत्रण की initialisation मैं की तरह तो

jQuery('#available input', 
      this.controlDiv).bind('click', this, this.availableCategoryClick); 

सूचना है कि मैं कर रहा हूँ Pasing विभिन्न क्लिक ईवेंट ऊपर तार के दौरान 'इस' बाँध विधि में डेटा तर्क के रूप में। मैं ऐसा करता हूं ताकि मैं क्लिक इवेंट को सक्रिय करने वाले तत्व से नियंत्रण उदाहरण से जुड़े डेटा पर प्राप्त कर सकूं।

यह पूरी तरह से काम करता है, फिर भी मैं संदेह है वहाँ एक बेहतर तरीका

अतीत में प्रोटोटाइप का इस्तेमाल किया हो रही है, मैं एक बाँध वाक्य रचना है कि आप को नियंत्रित करने के क्या का मूल्य 'इस' घटना में था की अनुमति दी याद है।

jQuery तरीका क्या है?

Answer 1

आप jQuery.proxy() गुमनाम समारोह के साथ उपयोग कर सकते हैं, बस थोड़ा अजीब है कि 'संदर्भ' दूसरा पैरामीटर है।

$("#button").click($.proxy(function() { 
    //use original 'this' 
},this)); 

Answer 2

मुझे नहीं लगता कि jQuery के लिए एक अंतर्निहित सुविधा है। लेकिन अगर आप एक सहायक निम्नलिखित की तरह का निर्माण इस्तेमाल कर सकते हैं:

Function.prototype.createDelegate = function(scope) { 
    var fn = this; 
    return function() { 
     // Forward to the original function using 'scope' as 'this'. 
     return fn.apply(scope, arguments); 
    } 
} 

// Then: 
$(...).bind(..., obj.method.createDelegate(obj)); 

इस तरह, आप createDelegate() कि अपनी 'इस' गुंजाइश के रूप में एक दिया वस्तु के साथ विधि कॉल के साथ गतिशील 'आवरण कार्यों' बना सकते हैं।

उदाहरण:

function foo() { 
    alert(this); 
} 

var myfoo = foo.createDelegate("foobar"); 
myfoo(); // calls foo() with this = "foobar" 

Answer 3

jQuery का समर्थन नहीं करता बांधता है और पसंदीदा तरीका कार्यों का उपयोग करने के लिए है।

क्योंकि जावास्क्रिप्ट में, this.availableCategoryClick इस वस्तु पर availableCategoryClick समारोह बुला मतलब यह नहीं है, jQuery इस पसंदीदा सिंटैक्स का उपयोग करने की सलाह दें:

जावास्क्रिप्ट में

var self = this; 
jQuery('#available input', self.controlDiv).bind('click', function(event) 
{ 
    self.availableCategoryClick(event); 
}); 

OO अवधारणाओं को समझने के लिए कड़ी मेहनत कर रहे हैं, functionnal प्रोग्रामिंग अक्सर है आसान और अधिक पठनीय।

Answer 4

यह देखते हुए कि कार्य स्कोप बदलते हैं, var self = this जैसे कुछ के साथ इसे करने का सबसे आम तरीका है।

var self = this 

$('.some_selector').each(function(){ 
    // refer to 'self' here 
} 

Answer 5

मैं अपने रास्ते की तरह, वास्तव में एक ऐसी ही निर्माण का उपयोग करें: क्योंकि तब आपको मिल रहा इस तरह की तरह

var self = event.data.self; 

:

$('#available_input').bind('click', {self:this}, this.onClick); 

और this.onClick की पहली पंक्ति दोनों तत्व बंद (उपयोग के रूप में) और "यह" ऑब्जेक्ट को क्लोजर का उपयोग किए बिना स्वयं के रूप में क्लिक करते हैं।

Answer 6

jQuery में jQuery.proxy विधि (1.4 से उपलब्ध) है।

उदाहरण:

var Foo = { 
    name: "foo", 

    test: function() { 
    alert(this.name) 
    } 
} 

$("#test").click($.proxy(Foo.test, Foo)) 
// "foo" alerted 

Answer 7

आप जावास्क्रिप्ट bind विधि इस तरह उपयोग कर सकते हैं:

var coolFunction = function(){ 
    // here whatever involving this 
    alert(this.coolValue); 
} 

var object = {coolValue: "bla"}; 


$("#bla").bind('click', coolFunction.bind(object)); 

Answer 8

एचटीएमएल 5 संगत ब्राउज़रों प्रदान एक bind method जो शायद साफ वाक्य रचना है, और नहीं ढांचे पर निर्भर है, हालांकि यह है पर Function.prototype IE 9 तक IE में नहीं बनाया गया है। (polyfill इसके बिना ब्राउज़र के लिए है।)

आपके उदाहरण के आधार पर, आप इसे इस तरह उपयोग कर सकते हैं:

jQuery('#available input', 
     this.controlDiv).bind('click', this.availableCategoryClick.bind(this)); 

(ओर ध्यान दें: पहले bind इस बयान में jQuery का हिस्सा है और Function.prototype.bind साथ कोई संबंध नहीं है)

या थोड़ा अधिक संक्षिप्त और अप-टू-डेट jQuery का उपयोग करें (और से भ्रम को समाप्त करने के लिए bind रों दो भिन्न प्रकार):

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));