Javascript personnalisé "événement" écouteur, en utilisant l'implémentation du prototype OOP

Question

J'ai essayé d'envelopper ma tête autour de celui-ci, et beaucoup de tutoriels et de sites ont suggéré la création d'un objet événement distinct, qui semble être un peu d'overkill pour simplement mettre en œuvre une fonction à un moment donné dans l'objet.

Fondamentalement, je veux qu'un événement "onComplete" personnalisé se déclenche lorsque certaines méthodes sont appelées dans l'objet utilisé. J'ai un objet de contrôle GMaps qui est activé ou désactivé. Quand il est activé, il permet de manipuler les polylignes sur la carte, mais lorsqu'il est désactivé, il désactive la manipulation, à quel point je voudrais que les données de la polyligne soient stockées. Ce que je tente de faire est d'autoriser les utilisateurs de l'objet à créer leur propre événement pour écouter l'événement désactivé et leur permettre d'accéder aux données de polyligne de cet objet. Comment puis je faire ça?

Ceci est mon code jusqu'ici:

function ToggleLineDrawControl() {} 

ToggleLineDrawControl.prototype = new GControl(); 

ToggleLineDrawControl.prototype._on = false; 

ToggleLineDrawControl.prototype._button = false; 

ToggleLineDrawControl.prototype._map = false; 

ToggleLineDrawControl.prototype._overlay = false; 

ToggleLineDrawControl.prototype._plots = []; 

ToggleLineDrawControl.prototype._line = false; 

ToggleLineDrawControl.prototype._addPlotListener = false; 

ToggleLineDrawControl.prototype._onComplete = false; 

ToggleLineDrawControl.prototype.initialize = function(map) { 
this._map = map; 

var me = this; 

var container = document.createElement('div'); 

var buttonDiv = document.createElement('div'); 
this._button = buttonDiv; 
this.setButtonStyle_(); 
container.appendChild(this._button); 
this._button.appendChild(document.createTextNode('Plot')); 

GEvent.addDomListener(this._button, 'click', function() { 
    if(!this._on) { 
     this.style.backgroundColor = '#333333'; 
     this.style.color = 'white'; 
     this.firstChild.nodeValue = 'Done'; 

     me.startPlotting(); 

     this._on = true; 
    } else { 
     this.style.backgroundColor = 'white'; 
     this.style.color = '#333333'; 
     this.firstChild.nodeValue = 'Plot' 

     me.stopPlotting(); 

     this._on = false; 
    } 
}); 

this._map.getContainer().appendChild(container); 

return container; 
}; 

ToggleLineDrawControl.prototype.getDefaultPosition = function() { 
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 57)); 
}; 

ToggleLineDrawControl.prototype.setButtonStyle_ = function() { 
    this._button.style.textDecoration = 'none'; 
    this._button.style.color = '#333333'; 
    this._button.style.backgroundColor = 'white'; 
    this._button.style.font = 'small Arial'; 
    this._button.style.border = '1px solid black'; 
    this._button.style.padding = '2px'; 
    this._button.style.marginBottom = '3px'; 
    this._button.style.textAlign = 'center'; 
    this._button.style.width = '5em'; 
    this._button.style.cursor = 'pointer'; 
}; 

ToggleLineDrawControl.prototype.setPlot = function(latlng) { 
    var wicon = new GIcon(); 
    wicon.image = 'http://www.site.com/images/waypoint2.png'; 
    wicon.iconSize = new GSize(32, 32); 
    wicon.iconAnchor = new GPoint(8, 28); 

    var marker = new GMarker(latlng, {icon: wicon}); 

    this._map.addOverlay(marker); 

    this._plots.push(latlng); 

    this.drawLines(); 
}; 

ToggleLineDrawControl.prototype.drawLines = function() { 
    var numPlots = this._plots.length; 

    if(this._line != false) { 
      this._map.removeOverlay(this._line); 
    } 

    if(numPlots > 1) { 
     this._line = new GPolyline(this._plots, '#cc0000', 2, 0.75); 

     this._map.addOverlay(this._line); 
    } 
} 

ToggleLineDrawControl.prototype.startPlotting = function() { 
    var me = this; 

    this._addPlotListener = GEvent.addListener(this._map, 'click', function(o, l, ol) { 
     me.setPlot(l); 
    }); 
}; 

ToggleLineDrawControl.prototype.stopPlotting = function() { 
    GEvent.removeListener(this._addPlotListener); 
}; 

ToggleLineDrawControl.prototype.onComplete = function(callback) { 
    this._onComplete = callback // get this to somehow be listener event method 
}; 

Answer 1

Vous pouvez déplacer votre fonction onComplete près du sommet que c'est-ce que vous semblez poser des questions sur.

Mais, je ne comprends pas le flux. Si j'utilise votre bibliothèque et que je souhaite transmettre une fonction, en tant que gestionnaire d'événements, pour onComplete, vous la stockez dans une variable prototype (this._onComplete), de sorte que chaque objet ne dispose que d'une fonction de rappel.

Où cela s'appelle-t-il?

Une fois que vous avez terminé, vous devriez appellerez le rappel, en passant dans l'objet comme paramètre: if (this._onComplete != false this._onComplete(this);

Answer 2

Ok résolu avec un peu d'aide d'un ancien collègue. Parfois, vous avez juste besoin de sortir de votre propre tête, et demandez à la bonne personne. De toute façon, James avait raison de dire que je n'appelais même pas la méthode en premier lieu. Ainsi, un de mes collègues a suggéré la création d'une référence à la fonction personnalisée dans la fonction principale de l'objet en option:

function ToggleLineDrawControl(options) { 
    this._onComplete = options.onComplete; 
} 

... et dans la méthode stopPlotting(), où je veux cette méthode pour obtenir appelé:

ToggleLineDrawControl.prototype.stopPlotting = function() { 
    ... 
    this._onComplete(this); 
}; 

fonctionne comme un charme