jQuery: définition widget UI

Question

J'ai un widget défini comme ceci:

$.widget("ui.mywidget", { 
    _init: function() { 
     this.element.bind("keyup", function(event) { 
      alert(this.options); 
      alert(this.options.timeout); 
     }); 
    } 
}); 

Et essayer de l'appeler comme ceci:

$("input.mywidget").mywidget({timeout: 5}); 

I a également redéfini la méthode bind en utilisant le style this.element.keyup(function(event) { ... }): pas différence. Mais, dans la liaison keyup, this.options (et en le référençant comme options), les deux produisent indéfini. Je pensais que le framework de widget UI permettait ce type d'abstraction; Est-ce que je fais quelque chose de mal?

Answer 1

A l'intérieur bind(), this changements de se référer à l'objet qui l'événement est déclenché sur. Essayez:

$.widget("ui.mywidget", { 
    _init: function(options) { 
     var opts = this.options; 
     this.element.bind("keyup", function(event) { 
      alert(opts); 
      alert(opts.timeout); 
     }); 
    } 
}); 

Answer 2

Ce que @Dave a dit est vrai. Vous pouvez également définir "this" sur une variable plutôt que d'utiliser des options en tant qu'argument de la fonction init. Voici comment je vois souvent mis en œuvre:

$.widget("ui.mywidget", { 
    options: { 
     timeout: 100 
    }, 
    _init: function() { 
     var self = this; 
     self.element.bind("keyup", function(event) { 
      alert(self.options); 
      alert(self.options.timeout); 
     }); 
    } 
}); 

Answer 3

Pourquoi arrêter là? Consultez $.proxy et écrire un meilleur code

$.widget("ui.mywidget", { 
    _create: function() { 

     //Under this syntax, _omgAlertsRule must be a method of 'this' 
     this.element.bind("keyup", $.proxy(this, '_omgAlertsRule')); 
    }, 
    _omgAlertsRule: function(event){ 

     alert(this.options); 
     alert(this.options.timeout); 
    } 
});