Evénements Widget JQuery dans JavaScript orienté objet

Question

Je tente d'écrire un widget personnalisé et je souhaite utiliser les widgets d'interface utilisateur existants dans la classe que j'écris. Le problème est que lorsqu'un événement se déclenche, la méthode de classe invoquée semble hors de portée du reste de la classe, car tous les membres que j'essaie de lire ne sont pas définis. Voici le code:

<script type="text/javascript"> 
MyClass = function() 
{ 
    this.init(); 
} 

$.extend(MyClass.prototype, 
    { 
     init: function() 
     { 
      this.field = 'Hello world.'; 

      /* Let's try using a slider. */ 
      this.slider = $("#slider"); 

      this.slider.slider(
       { 
        change: this.callback, 
        min: 270, 
        max: 800, 
        slide: this.callback 
       } 
      ); 
     }, 

     callback: function() 
     { 
      alert(this.field); 
     } 
    } 
); 
</script> 

<div id="slider"></div> 
<script type="text/javascript"> 
var myClass = new MyClass(); 
</script> 

Ceci est une simplification du problème, et je l'ai essayé quelques méthodes pour contourner ce problème, comme l'utilisation bind au lieu de la notation de rappel:

this.slider.bind('slidechange', this.callback(this)); 
this.slider.bind('slide', this.callback(this)); 

Cependant , cela conduit juste à ce que le rappel soit appelé malgré l'occurrence de l'événement.

Merci.

Answer 1

Voir http://www.alistapart.com/articles/getoutbindingsituations/ pour des méthodes sur la liaison this, en utilisant des fermetures

EDIT: un exemple concret de la façon dont cela peut être réalisé ...

$.extend(MyClass.prototype, 
{ 
    init: function() 
    { 
     this.field = 'Hello world.'; 

     /* Let's try using a slider. */ 
     this.slider = $("#slider"); 

     this.slider.slider(
      { 
       change: this.callback(this), 
       min: 270, 
       max: 800, 
       slide: this.callback(this) 
      } 
     ); 
    }, 

    callback: function(that) 
    { 
     return function() { 
      alert(that.field); 
     } 
    } 
} 
);