Discussion :

[Sharcoux]

Bonjour,

Voilà le problème : j'ai une "classe" javascript Ligne . Cette ligne est en fait une ligne d'un tableau sensé lister des documents :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var Line = function(doc, i) {
    this.document = doc;//le docuement à représenter
    this.ID = i;
    this.html = Line.getOriginalHTML();//le code html de la ligne à insérer dans le tableau
 
    this.auClic = function() {edit(this.document);}//une fonction à exécuter au clic sur la ligne
}

le code html de cette ligne (du type <tr>....</tr>) est initialisé avec Line.getOriginalHTML();

Ensuite, je le modifie en fonction du document que je veux représenter.

Le problème vient quand je veux définir un onclick sur cette ligne. J'ai un truc du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

maLigne.html = $("elementAModifier", maLigne).attr("onclick",this.auClic);

Mais avec cette syntaxe, le navigateur exécute immédiatement la fonction this.auClic . Comment lui expliquer qu'il s'agit d'une simple référence?

Merci

[RomainVALERI]

j'ai une "classe" javascript Ligne

(admettons)

Le problème vient quand je veux définir un onclick sur cette ligne. J'ai un truc du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

maLigne.html = $("elementAModifier", maLigne).attr("onclick",this.auClic);

Mais avec cette syntaxe, le navigateur exécute immédiatement la fonction this.auClic . Comment lui expliquer qu'il s'agit d'une simple référence?

C'est une simple référence. Je ne sais pas pourquoi le navigateur l'exécute directement, mais ça m'a plutot l'air d'être un souci lié à la manière d'implémenter ça en jQuery... tu es sur du fonctionnement de la fonction attr ?

Sinon : as-tu essayé la méthode "standard", avec un vrai gestionnaire d'événement ?

edit : au fait, je vois que tu appelles Line.getOriginalHTML... à quel endroit est-elle incluse dans ton code ?

[Sharcoux]

Merci pour ta réponse

oui, tu auras noté les guillemets autour du mot "classe". Ca reste qd même un terme pratique.

attr marche impeccable pour tous les autres éléments, genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

maLigne.html = $("elementAModifier", maLigne).attr("class",this.document.getType());

mais pour une raison obscure, il se sent obligé d'évaluer this.auClic dès qu'elle est mentionnée...

Tu peux m'en dire un peu plus sur la méthode "standard" ?

[RomainVALERI]

Tu peux m'en dire un peu plus sur la méthode "standard" ?

addEventListener / attachEvent ^^

...qui souvent s'utilisent à travers une mini fonction qui switche selon le navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function declencheur(cible, condition, effet) {
   if (cible.addEventListener) {
      cible.addEventListener(condition, effet, false);
   }
   else if (cible.attachEvent) {
      cible.attachEvent("on" + condition, effet);
   }
}

mais si tu fais du jQuery il doit y avoir mieux que ça non ? ^^

[Sharcoux]

mais si tu fais du jQuery il doit y avoir mieux que ça non ? ^^

Euh... Peut-être, tu penses à quel genre de truc?

Pour les Event, je vais regarder tout ça, mais est-ce que c'est pas un peu compliqué pour quelque chose d'initialement relativement simple?

Ah, et je kiff ton générateur de phrases ^^

[Sharcoux]

MERCI !!!!
J'ai trouvé la fonction .click de JQuery (oui, je suis débutant ^^ )
Ca marche au poil. Merci de m'avoir mis sur la voie

[Sharcoux]

Bon, en fait, ça marche pas si bien que ça...

edit: Dans toute la suite, "monElement" désigne l'élément HTML sur lequel je veux activer le clic. "Ma ligne" représentera une instance de Line (classe définie plus haut)

j'ai dans une méthode de Line :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(monElement).click(this.auClic);

Effectivement, si je clique sur "monElement", ça lance la fonction this.auClic.

Sauf que this.auClic, exécute : edit(this.document), et qu'ici, this désigne "monElement", et non plus ma ligne...

J'ai donc essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(monElement).click(this.auClic(this));
Line.prototype.auClic = function(objet) {edit(objet.document);}

Seul problème : this.auClic(this) n'est plus une référence à une fonction, mais un appel de fonction. Le navigateur l'exécute donc immédiatement.

Deuxième tentative :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(monElement).click(function() {this.auClic(this)});
Line.prototype.auClic = function(objet) {edit(objet.document);}

Mais à ce moment là, this représente déjà monElement et plus ma ligne...

Si vous avez une idée...

Merci

[Sharcoux]

Il y a peut-être quelque chose à faire avec des Event comme le suggère Romain, mais n'ayant jamais utilisé ça, je veux bien un coup de main pour mettre ça en place...
Quel élément doit recevoir le addEventListener ? Quelles infos je suis sensé récupérer de cet event?

J'ai essayé sans grande conviction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(monElement).addEventListener("click",Line.auClic,false);
Line.auClic = function(event) {edit(event.document);}

réponse : addEventListener is not a function...

[RomainVALERI]

A ce stade, je me demande s'il ne faudrait pas déplacer le thread vers la partie jQuery... ^^

[Sharcoux]

Pas d'accord avec toi : je me fiche de la méthode, JQuery, DOM, ou n'importe quoi ça me va.

Mais prenons ton lien. J'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(monElement).bind("click",this.auClic);

Et je retrouve le même problème que précédemment, à savoir que this ne désigne plus ce que je veux...

[Bovino]

C'est tout à fait normal.
this référence l'objet qui a appelé la méthode en cours.
Si tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(monElement).click(this.auClic(this));

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(monElement).onclick = function(){this.auClic()};

this référence à chaque fois l'objet appelant, donc soit l'objet HTML monElement soit (dans le cas de jQuery), l'objet jQuery correspondant à $(monElement).
Pour garder une référence au this du constructeur, il faut passer par un alias (souvent nommé that, me, etc.) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var that = this;
$(monElement).onclick = function(){that.auClic(that)};

A noter que comme that est une référence à this, il évolue de la même manière que this :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var Constructeur = function(){
    this.toto = 'toto 1';
    var that = this;
    this.toto2 = 'toto 2';
    alert(that.toto2);
};
new Constructeur();

[Sharcoux]

Bon, j'ai finalement trouvé une solution qui me fait un peu peur, mais tant pis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var Line = function(doc, i) {
    this.document = doc;//le docuement à représenter
    this.ID = i;
    this.html = Line.getOriginalHTML();//le code html de la ligne à insérer dans le tableau
    initialisation();
 }
Line.prototype = {
    auClic: function(objet) {edit(objet.document);}//une fonction à exécuter au clic sur la ligne
    initialisation; function() {
        var ligne = this;
        $(...monElement...).click(function() {ligne.auClic(ligne);});
    }
}

beurk

Mais bon, ça marche

[Bovino]

Pourquoi beurk ?

[Sharcoux]

Essaye de faire ça en Java par exemple, et dis-moi ce qu'en pense ton compilateur. Tu vas me dire que c'est pas le même langage, certes, mais ça a tendance à me hérisser un peu le poil de faire "variable = this;" quand l'objet n'est même pas fini d'être créé. Mais vu que javascript se fiche de ce genre de détail, j'imagine que je devrais m'en foutre également. C'est probablement juste un reste de mes anciennes habitudes

[Bovino]

Non, c'est juste que tu vois JavaScript comme un langage Orienté Objet classique alors que son modèle par prototype ne le rend absolument pas similaire à Java.
C'est pour ça que même s'il est possible de reproduire le fonctionnement de classes, cette terminologie est inappropriée pour JavaScript

[p3ga5e]

JQuery ne propose pas de mécanique de delegate ?

Car si c’est le cas je te conseille de mutualisé cet mécanique, si tu souhaite associé des méthodes d’objet a des événement. Un truc du genre :

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
Function.prototype.Delegate = function(obj)
{
    var method = this;
    return function() { return method.call(obj, arguments); };
};
 
var Line = function(doc, i) {
    this.document = doc;//le docuement à représenter
    this.ID = i;
    this.html = Line.getOriginalHTML();//le code html de la ligne à insérer dans le tableau
    initialisation();
 }
Line.prototype = {
    auClic: function() {edit(this.document);}//une fonction à exécuter au clic sur la ligne
    initialisation: function() 
    {      
        $(...monElement...).click(this.auClic.Delegate(this);});
    }
}

[Sharcoux]

+1
Très bien vu. Merci beaucoup pour l'astuce

[RomainVALERI]

roue

[RomainVALERI]

Essaye de faire ça en Java par exemple, et dis-moi ce qu'en pense ton compilateur. Tu vas me dire que c'est pas le même langage, certes, mais ça a tendance à me hérisser un peu le poil de faire "variable = this;" quand l'objet n'est même pas fini d'être créé. Mais vu que javascript se fiche de ce genre de détail, j'imagine que je devrais m'en foutre également. C'est probablement juste un reste de mes anciennes habitudes

T'as raison. Moi pareil en Java : combien de fois j'ai râlé parce que ces feignants de concepteurs (forcément mauvais) du langage avaient "oublié" (la honte) d'implémenter les fonctionnalités et caractéristiques que moi j'aimais bien en FORTRAN

Comment ça j'exagère ? pff si on peut plus taquiner