So behandeln Sie Ereignisse in jQuery UI-Widgets

Question

Ich versuche, ein jQuery-Widget nach dem angegebenen Modell here zu schreiben. Hier ist eine Momentaufnahme des widget:

(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); 

Hier ist das Problem mit dem Umfang ist der „this“ in der _titleClick Methode innerhalb der Methode Dies weist auf das title Element. Aber ich muss es auf das Element widget zeigen.

denke ich, eine Art und Weise, wie es sein zu tun, wird

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

eine Wrapper-Klasse zu verwenden, ist dies der beste Weg, um dieses Problem zu lösen, oder gibt es ein allgemeines Muster dieses Problem zu lösen?

Answer 1

Ich schrieb eine Methode meiner eigenen dieses Thema

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

Answer 2

Sie sollten jQuery.proxy() http://api.jquery.com/jQuery.proxy/

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

Answer 3

In Ihrem erstellen, init (oder irgendwo in Ihrem Beispiel) aussehen zu lösen Funktion wie folgt vorgehen:

 _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)); 

     ... 

     }, 

Jetzt Ihre Objekte Event hander wie folgt definieren:

 _myevent: function(event) { 

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

Answer 4

Verwenden Sie die this._on() method, um den Handler zu binden. Diese Methode wird von der jQuery UI-Widget-Factory bereitgestellt und stellt sicher, dass innerhalb der Handler-Funktion this immer auf die Widget-Instanz verweist.

_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

definieren scope = var diese und Umfang in Ereignishandler verwenden.

_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); 
     }); 
    }, 

Answer 6

Eine andere Möglichkeit, das Gleiche zu tun, ohne Verschluss verwendet wird, ist das Widget als Teil der Ereignisdaten zu übergeben, wie so:

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

Es wird verwendet, über die jquery bind Methode jetzt sein on ist bevorzugt.

Ab jQuery 1,7, die .auf() Methode ist die bevorzugte Methode für zu einem Dokument, Event-Handler zu befestigen. Für frühere Versionen wird die Methode .bind() verwendet, um einen Ereignishandler direkt an Elemente anzuhängen. Die Handler werden an die aktuell ausgewählten Elemente in des jQuery-Objekts angehängt, so dass diese Elemente an dem Punkt vorhanden sein müssen, an dem der Aufruf an .bind() erfolgt. Informationen zur flexibleren Ereignisbindung finden Sie in der Diskussion der Ereignisdelegierung in .on() oder .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` 
},