Comment obtenir une instance de widget à l'intérieur d'un widget jQuery ?

Question

Je travaille sur un widget clavier dans le cadre d'un projet. $.ui.mouse . J'ai besoin d'un comportement de clic (non déclenché par _mouseCapture). J'ai des difficultés à récupérer this.options à l'intérieur. Voir les blocs de code ci-dessous :

$.widget("ui.keyboard", $.ui.mouse, {
    widgetEventPrefix: "keyboard",
    options: {
        [...]
    },
    [...],
    _create : function() {
        this.element.bind('click.'+this.widgetName, this._mouseClick);
    },
    _mouseClick: function(e) {
        // how do i get this.options here
    }
});

Est-il préférable de procéder ainsi :

$.widget("ui.keyboard", $.ui.mouse, {
    widgetEventPrefix: "keyboard",
    options: {
        [...]
    },
    [...],
    _create : function() {
        var self = this;
        this.element.bind('click.'+this.widgetName, function(e) { self._mouseClick(e, self); });
    },
    _mouseClick: function(e, self) {
        // how do i get this.options here -> self.options
    }
});

Ou encore ceci :

$.widget("ui.keyboard", $.ui.mouse, {
    widgetEventPrefix: "keyboard",
    options: {
        [...]
    },
    [...],
    _create : function() {
        this.element.bind('click.'+this.widgetName, this._mouseClick);
    },
    _mouseClick: function(e) {
        var self = $.data(this, "keyboard");
        // how do i get this.options here -> self.options
    }
});

J'ai eu des problèmes avec le dernier lorsque j'essaie de le déclencher manuellement $.data n'est pas affiché à moins que je ne déclenche un clic sur this.element (ce qui est tout à fait logique).

Existe-t-il d'autres moyens ? Quel est le meilleur choix ?

Merci,

Answer 1

Vous pouvez appeler une fonction anonyme renvoyant un objet, comme ceci :

$.widget("ui.keyboard", $.ui.mouse, function(){
  var self;

  return {
    widgetEventPrefix: "keyboard",
    options: {
      [...]
    },
    _create : function() {
      self = this;
      this.element.bind('click.'+this.widgetName, function(e) { self._mouseClick(e, self); });
    },
    _mouseClick: function(e, self) {
      // do something with self.options
    }
  }
}());

De cette façon, vous avez accès à vous-même à partir de _mouseClick-