Comment gérer les événements en jQuery UI widgets

Je suis en train d'écrire un widget jQuery suivant le modèle donné ici.
Voici un aperçu du 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);

Ici, le problème est à la portée de "ce" à l'intérieur de la _titleClick méthode, à l'intérieur de la méthode par points à la title élément. Mais j'en ai besoin pour pointer vers le widget élément.

Je pense qu'une façon de le faire est d'utiliser une classe wrapper comme

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

Est-ce la meilleure façon de résoudre ce problème ou est-il un modèle général pour résoudre ce problème?

InformationsquelleAutor Arun P Johny | 2010-10-26
  1. 21

    Utiliser le cette._on() méthode pour lier le gestionnaire. Cette méthode est fournie par le jQuery UI widget factory et assurez-vous que l'intérieur de la fonction de gestionnaire, this fait toujours référence à l'instance widget.

    _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.
},
    • Je ne savais pas à ce sujet. Je pense que c'est le meilleur choix si vous n'avez pas besoin de faire référence à l'élément qui a été cliqué.
    InformationsquelleAutor Jens Bannmann
  2. 5

    Vous devriez regarder pour jQuery.proxy() http://api.jquery.com/jQuery.proxy/

    el.bind('evenname', $.proxy(function () {
   this.isMyScope.doSomething();
}, scope));
    • Merci à vous. c'est exactement ce que je cherchais.
    InformationsquelleAutor nrako
  3. 3

    J'ai écrit une méthode pour résoudre ce problème

    _wrapCallback : function(callback) {
    var scope = this;
    return function(eventObject) {
        callback.call(scope, this, eventObject);
    };
}
    InformationsquelleAutor Arun P Johny
  4. 2

    Dans votre créer, init (ou quelque part dans votre exemple), la fonction de cela:

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

        ...

        },

    Maintenant définir vos objets événement virage comme ceci:

            _myevent: function(event) {

            //use the this ptr to access the instance of your widget
            this.options.whatever;
        },
    InformationsquelleAutor Steve Sheldon
  5. 0

    définir var scope=ce, et l'utilisation portée dans un gestionnaire d'événement.

        _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);
        });
    },
    InformationsquelleAutor legendJSLC
  6. 0

    Une autre façon de faire la même chose sans l'aide de la fermeture, est de passer le widget comme une partie des données d'événement de la sorte:

    //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);
};
    • C'est ce que je ferais quand j'en ai besoin pour être en mesure de référence de l'élément qui est sur, et également obtenir l'accès à l'instance widget.
    InformationsquelleAutor b01
  7. 0

    Il sert à être via jquery bind méthode maintenant on est favorisée.

    De jQuery 1.7, l' .sur() la méthode est la méthode préférée pour
    fixation de gestionnaires d'événements dans un document. Pour les versions antérieures, l'
    .méthode bind() est utilisé pour attacher un gestionnaire d'événement directement à
    éléments. Les gestionnaires sont attachés aux éléments sélectionnés dans
    l'objet jQuery, de sorte que ces éléments doivent exister au moment de l'appel
    d' .bind() se produit. Pour plus flexible de liaison d'événement, voir la discussion
    de l'événement délégation à .sur() ou .délégué().

    _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`
},
    InformationsquelleAutor rism