Discussion :

[Soap17]

Bonjour,

Je rencontre souvent le m�me probl�me en javascript :
Je cr�er des objets comportant des m�thodes appel�es par �v�nement. Sauf que dans ces m�thode, je ne peux plus acc�der � mes variables de classe.

Exemple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var MarqueurOH = function(params_id, params_data)
{
	//Initialisation de l'objet :
	MarqueurOH.initialized = false;
 
	//Initialisation des fonctions :
	function toggleInfoWindow(event)
	{
		//Impossible d'aceder à cette variable :
		this.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	}
 
	//Initialisation des variables de classe :
	this.id = id;
	this.data = data;
	this.marqueur = new google.maps.Marker({});
 
	//event :
	google.maps.event.addListener(marqueur, 'click', toggleInfoWindow);
 
	//L'objet est initialisé, les fonctions ne seront pas recréées pour chaque instances :
	MarqueurOH.initialized = true; 
}

J'ai donc cherch� et trouv� ce tutoriel que je n'ai pas encore lu :
http://t-templier.developpez.com/tut...vascript-poo3/
http://t-templier.developpez.com/tut...vascript-poo2/
http://t-templier.developpez.com/tut...vascript-poo1/

Croyez vous qu'il r�solve mes probl�mes ?
Existe il une librairie qui permette de cr�er des objets fonctionnel m�me dans les cas d'appel de fonction �v�nement ? Je crois qu'en cr�ant un plugin jquery, je r�soudrai mes probl�mes, mais bon je ne veux pas forcement que l'objet soit associ� � un �l�ment du dom...


Merci d'avance

[Darkyl]

Salut

Alors, je veux pas dire de connerie

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
function toggleInfoWindow(event)
	{
		//Impossible d'aceder à cette variable :
		this.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	}

this.marqueur d�signerait toggleInfoWindow.marqueur si je ne m'abuse (et si cela existait) mais il te faut acc�der au parent, du style :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
function toggleInfoWindow(event)
	{
		
		parent.marqueur 
	}

Mais je ne connais pas le mot clef exact, je vais cherchais...

Bon d'accord, je t'ai pas beaucoup aider l� mais sait on jamais, peut-�tre que ma logique est bonne et qu'un forumeur va expliciter...

[Soap17]

C'est l'id�e, mais malheureusement ce n'est pas possible en javascript.
A moins de simuler cet aspect "programmation objet pure" en lisant le tuto. Mais en fait je me demandais surtout, est ce que ce tuto r�sout exactement ce dont je cherche � faire, c'est � dire acc�der � un objet membre dans une fonction evenement !?

[Willpower]

Le probl�me vient du fait que tu passes ta fonction "toggleInfoWindow" � un event et elle sera donc appel�e de fa�on isol�e sans l'objet sur lequel elle devrait �tre appel�e :

un peu comme :
MarqueurOH.toggleInfoWindow(); // this == toggleInfoWindow
var f = MarqueurOH.toggleInfoWindow;
f(); // this == window (puisque non sp�cifi� -> aucun point (.) devant la fonction

Une des 2 solutions vient donc � encapsuler l'objet dans une closure (les librairies utilisent en g�n�ral une fonction "bind" pour faire �a il me semble) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
	//event :
	google.maps.event.addListener(marqueur, 'click',function(){ MarqueurOH.toggleInfoWindow(); });

l'autre solution, c'est de stocker une r�f�rence au "this" dans la d�finition de l'objet, ainsi dans les fonctions (d�clar�e dans ce contexte) pourront y acc�der m�me si leurs "this" valent autre chose :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var MarqueurOH = function(params_id, params_data)
{
	//Sauvegarde de l'objet :
	var that = this;
 
	//Initialisation de l'objet :
	MarqueurOH.initialized = false;
 
	//Initialisation des fonctions :
	function toggleInfoWindow(event)
	{
		//récupération de l'objet principale via une référence.
		that.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	}
 //....
}

[Watilin]

+1 pour Will : le plus simple est de sauvegarder le contexte.

jQuery et Prototype, entre autres, proposent des m�thodes pour conserver le contexte lorsqu'on attache un �v�nement, mais je n'ai pas l'impression que l'API Google Maps ait quelque chose dans ce go�t-l�. Dans la doc, il est conseill� d'utiliser les closures, ce qui rejoint la remarque de Will. Apr�s, je ne connais pas vraiment cette API, donc peut-�tre que je me trompe...

Edit: lorsqu'un gestionnaire d'�v�nement est d�clench�, this d�signe l'�l�ment DOM sur lequel ce gestionnaire a �t� attach�. Dans le cas pr�sent, il semblerait que ce soit le marqueur en question. Si c'est vrai, �a nous simplifie la vie

[sekaijin]

Bonjour,

Je rencontre souvent le m�me probl�me en javascript :
Je cr�er des objets comportant des m�thodes appel�es par �v�nement. Sauf que dans ces m�thode, je ne peux plus acc�der � mes variables de classe.

Exemple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var MarqueurOH = function(params_id, params_data)
{
	//Initialisation de l'objet :
	MarqueurOH.initialized = false;
 
	//Initialisation des fonctions :
	function toggleInfoWindow(event)
	{
		//Impossible d'aceder à cette variable :
		this.marqueur !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	}
 
	//Initialisation des variables de classe :
	this.id = id;
	this.data = data;
	this.marqueur = new google.maps.Marker({});
 
	//event :
	google.maps.event.addListener(marqueur, 'click', toggleInfoWindow);
 
	//L'objet est initialisé, les fonctions ne seront pas recréées pour chaque instances :
	MarqueurOH.initialized = true; 
}

J'ai donc cherch� et trouv� ce tutoriel que je n'ai pas encore lu :
http://t-templier.developpez.com/tut...vascript-poo3/
http://t-templier.developpez.com/tut...vascript-poo2/
http://t-templier.developpez.com/tut...vascript-poo1/

Croyez vous qu'il r�solve mes probl�mes ?
Existe il une librairie qui permette de cr�er des objets fonctionnel m�me dans les cas d'appel de fonction �v�nement ? Je crois qu'en cr�ant un plugin jquery, je r�soudrai mes probl�mes, mais bon je ne veux pas forcement que l'objet soit associ� � un �l�ment du dom...


Merci d'avance

encore une fois javascript n'est pas un langage � base de classe mais de prototype.

enfin tout comme dans les langages � base de classe this s'applique � l'objet courant et non pas � un quelconque truc d�finit on ne sais o�.

lorsqu'on passe � un listener une r�f�rence � une fonction (javascript emploi � bon escient le mot fonction l� ou java et C++ en abuse et devrait utilise rm�thode) il passe la fonction et que la fonction
celle-ci s'appliquera donc � l'objet this activ� par le listener

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
monObj = {
   foo: function() {
      this.a = 45;
   },
   a: 105
}
 
bouton = document.getElementById('btn')
bouton.onclick=monObj.foo;
console.log(monObj.a); // => 105
console.log(bouton.a); // => undefined
 
//click sur le bouton btn
console.log(monObj.a); // => 105
console.log(bouton.a); // => 45

On n'a pass� qu'une r�f�rence � foo et non pas l'objet monObj

appeler monObj.foo() dans la le listeneur du bouton il faut faire

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
monObj = {
   foo: function() {
      this.a = 45;
   },
   a: 105
}
 
bouton = document.getElementById('btn')
bouton.onclick= function () {monObj.foo();};
console.log(monObj.a); // => 105
console.log(bouton..a); // => undefined
 
//click sur le bouton btn
console.log(monObj.a); // => 45
console.log(bouton.a); // => undefined

ou encore

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
monObjConstructor = function () {
   this.foo= function() {
      this.a = 45;
   };
   this.a= 105;
   var me = this;
   document.getElementById('btn').onclick= function () {
      me.foo();
   };
}
 
monObj = new monObjConstructor ();
console.log(monObj.a); // => 105
console.log(bouton..a); // => undefined
 
//click sur le bouton btn
console.log(monObj.a); // => 45
console.log(bouton.a); // => undefined

A+JYT

[Soap17]

Merci � tous pour votre aide.
Le "var me = this;" me plait