jQuery UI विजेट्स में ईवेंट को कैसे प्रबंधित करें

Question

मैं here दिए गए मॉडल के बाद एक jQuery विजेट लिखने की कोशिश कर रहा हूं।

(function ($) { 
    $.widget("ui.notification", { 
     _create: function() { 
      if (!this.element.hasClass("ntfn")) { 
       this.element.addClass("ntfn"); 
      } 

      this.elTitle = this.element.append("<div class='ntfn-title'>Notifications</div>"); 

      this.elTitle.click(this._titleClick) 
     }, 
     _titleClick: function() { 
      console.log(this); 
     } 
    }); 
})(jQuery); 

यहाँ समस्या "इस" _titleClick विधि के अंदर, विधि के अंदर इस title तत्व को इंगित करता है की गुंजाइश के साथ है: यहाँ विजेट का एक स्नैपशॉट है। लेकिन मुझे इसे widget तत्व पर इंगित करने की आवश्यकता है।

मैं कर ऐसा लगता है जैसे

var that = this; 
this.elTitle.click(function() { 
    that._titleClick.apply(that, arguments); 
}); 

इस इस समस्या को हल करने के लिए सबसे अच्छा तरीका है या किसी भी सामान्य पैटर्न इस समस्या को हल करने के लिए है एक आवरण वर्ग का उपयोग करने के लिए किया जाएगा करने का एक तरीका लगता है?

Answer 1

मैं एक विधि अपने ही लिखा था इस मुद्दे

_wrapCallback : function(callback) { 
    var scope = this; 
    return function(eventObject) { 
     callback.call(scope, this, eventObject); 
    }; 
} 

Answer 2

आपको अपने इन jQuery.proxy() http://api.jquery.com/jQuery.proxy/

el.bind('evenname', $.proxy(function() { 
    this.isMyScope.doSomething(); 
}, scope)); 

Answer 3

के लिए तत्पर हैं init (अपने उदाहरण में कहीं या) बनाते हैं, तो चाहिए हल करने के लिए फ़ंक्शन यह करें:

 _create: function() { 

     ... 

     // Add events, you will notice a call to $.proxy in here. Without this, when using the 'this' 
     // property in the callback we will get the object clicked, e.g the tag holding the buttons image 
     // rather than this widgets class instance, the $.proxy call says, use this objects context for the the 'this' 
     // pointer in the event. Makes it super easy to call methods on this widget after the call. 
     $('#some_tag_reference').click($.proxy(this._myevent, this)); 

     ... 

     }, 

अब अपने ऑब्जेक्ट ईवेंट हैंडर को इस तरह परिभाषित करें:

 _myevent: function(event) { 

      // use the this ptr to access the instance of your widget 
      this.options.whatever; 
     }, 

Answer 4

हैंडलर को बांधने के लिए this._on() method का उपयोग करें। यह विधि jQuery UI विजेट फ़ैक्टरी द्वारा प्रदान की जाती है और यह सुनिश्चित करेगी कि हैंडलर फ़ंक्शन के भीतर, this हमेशा विजेट इंस्टेंस को संदर्भित करता है।

_create: function() { 
    ... 
    this._on(this.elTitle, { 
     click: "_titleClick" // Note: function name must be passed as a string! 
    }); 
}, 
_titleClick: function (event) { 
    console.log(this);  // 'this' is now the widget instance. 
}, 

Answer 5

वर गुंजाइश = इस परिभाषित करते हैं, और ईवेंट हैंडलर में गुंजाइश का उपयोग करें।

// using click in jQuery version 1.4.3+. 
var eventData = { 'widget': this }; 

// this will attach a data object to the event, 
// which is passed as the first param to the callback. 
this.elTitle.click(eventData, this._titleClick); 

// Then in your click function, you can retrieve it like so: 
_titleClick: function (evt) { 
    // This will still equal the element. 
    console.log(this); 
    // But this will be the widget instance. 
    console.log(evt.data.widget); 
}; 

Answer 6

बंद का उपयोग किए बिना एक ही बात करने के लिए एक और तरीका है, इसलिए जैसे घटना के डेटा का एक भाग के रूप में विजेट पारित करने के लिए है on पसंदीदा है।

jQuery 1.7 के रूप में, .on() विधि किसी दस्तावेज़ में ईवेंट हैंडलर संलग्न करने के लिए पसंदीदा विधि है। पिछले संस्करणों के लिए, .bind() विधि का उपयोग इवेंट हैंडलर को सीधे तत्वों को जोड़ने के लिए किया जाता है। हैंडलर वर्तमान में चयनित तत्वों से jQuery ऑब्जेक्ट में संलग्न हैं, इसलिए उन तत्वों को बिंदु पर .bind() पर मौजूद होना चाहिए। अधिक लचीली घटना बाध्यकारी के लिए, .on() या .delegate() में ईवेंट प्रतिनिधिमंडल की चर्चा देखें।

_create: function() { 
    var that = this; 
    ... 
    elTitle.on("click", function (event) { 
      event.widget = that; // dynamically assign a ref (not necessary) 
      that._titleClick(event); 
    }); 
}, 
_titleClick: function (event) { 
    console.log(this);    // 'this' now refers to the widget instance. 
    console.log(event.widget);  // so does event.widget (not necessary) 
    console.log(event.target);  // the original element `elTitle` 
}, 

Answer 7

यह bind विधि अब jQuery के माध्यम से हुआ करता था:

_create: function() {   
     var scope = this; 
     $(".btn-toggle", this.element).click(function() { 
      var panel = $(this).closest(".panel"); 
      $(this).toggleClass("collapsed"); 
      var collapsed = $(this).is(".collapsed"); 
      scope.showBrief(collapsed); 
     }); 
    },