Mootools - comment détruire une instance de classe

Question

Ce que j'essaie de faire est de créer une classe que je peux rapidement attacher aux liens, qui récupérera et affichera un aperçu en miniature du document auquel il est lié. Maintenant, je me concentre sur la facilité d'utilisation et la portabilité ici, je veux simplement ajouter un événement mouseover aux liens comme ceci:

<a href="some-document.pdf" onmouseover="new TestClass(this)">Testing</a>

Je sais qu'il ya d'autres façons que je peux aller à ce qui résoudrait mon question ici, et je peux finir par avoir à faire cela, mais en ce moment mon objectif est de mettre en œuvre comme ci-dessus. Je ne veux pas ajouter manuellement un événement mouseout à chaque lien, et je ne veux pas de code ailleurs que dans la classe (et l'événement mouseover créant l'instance de classe).

Le code:

TestClass = new Class({ 
    initialize: function(anchor) { 
     this.anchor = $(anchor); 
     if(!this.anchor) return; 

     if(!window.zzz) window.zzz = 0; 
     this.id = ++window.zzz; 

     this.anchor.addEvent('mouseout', function() { 
      // i need to get a reference to this function 
      this.hide(); 
     }.bind(this)); 

     this.show(); 

    }, 
    show: function() { 
     // TODO: cool web 2.0 stuff here! 
    }, 
    hide: function() { 
     alert(this.id); 

     //this.removeEvent('mouseout', ?); // need reference to the function to remove 

     /*** this works, but what if there are unrelated mouseout events? and the class instance still exists! ***/ 
     //this.anchor.removeEvents('mouseout'); 

     //delete(this); // does not work ! 
     //this = null; // invalid assignment! 
     //this = undefined; // invalid assignment! 

    } 
}); 

Que se passe actuellement avec le code ci-dessus:

• 1er temps: alertes 1
• 2ème temps: alertes 1, 2
• 3ème fois out: alertes 1, 2, 3
• etc

Comportement souhaité:

• 1er temps: alertes 1
• 2ème fois sur: les alertes 2
• 3ème fois sur: les alertes 3
• etc

Le problème est, Chaque fois que je souris sur le lien, je crée une nouvelle instance de classe et j'ajoute un nouvel événement mouseout pour cette instance. L'instance de classe reste également indéfiniment en mémoire. Au passage du curseur, j'ai besoin de supprimer l'événement mouseout et de détruire l'instance de la classe, donc lors des survols suivants, nous commençons à nouveau.

je pouvais créer une fonction d'aide pour ce faire en sorte que la classe est créé uniquement une fois pour chaque lien, quelque chose comme ceci:

function TestClassHelper(anchor) { 
    anchor = $(anchor); 
    if(!anchor) return; 

    if(!anchor.retrieve('TestClass')) anchor.store('TestClass', new TestClass(anchor)); 
    anchor.retrieve('TestClass').show(); 
} 

<a href="some-document.pdf" onmouseover="TestClassHelper(this)">Testing</a>

je finir par la mise en œuvre de cette façon si je dois, mais je suis curieux de savoir comment je peux réparer l'autre méthode.

Answer 1

Cela semble beaucoup plus complexe qu'il ne devrait l'être. Mais si vous voulez résoudre ce problème, vous devez enregistrer une référence à la fonction liée quelque part et la transmettre ensuite à removeEvent.

Par exemple:

// inside initialize 
this.boundHandler = function() { 
    this.hide(); 
}.bind(this) 
this.anchor.addEvent('mouseout', this.boundHandler); 

// inside hide  
this.removeEvent('mouseout', this.boundHandler); 

Voir la removeEvent docs des exemples de cette question.

Je ne recommanderais pas la délégation d'événements ici pour des raisons de performance.La meilleure approche consiste à attacher le gestionnaire en code plutôt qu'en ligne et à le faire une seule fois, afin que les objets inutiles ne soient pas créés chaque fois que l'utilisateur survole.