Fonctions anonymes et passage de variables

Salut, j'ai un problème assez embetant avec ce code:

Code:

---

1 2 3 4 5 6 7 8 9 10

function EditInPlace() { var v=getElementsBySelector("span.editinplace"); var l=v.length; for(i=0;i<l;i++) { var id_span = v[i].id; addEvent(v[i],'click',function() { ShowEditInPlace(id_span); }); } }

---

Qui va attacher un évènement clic sur tous les <span class=editinplace> avec le même id à chaque fois, le dernier de mon tableau.

Si j'ai par exemple:
<span id=s1 class=editinplace>Test</span>
<span id=s2 class=editinplace>Test</span>
<span id=s3 class=editinplace>Test</span>

Chaque clic sur n'importe lequel de ces 3 spans appelera ShowEditInPlace(s3).
Le comportement correct serait d'appeler ShowEditInPlace avec en paramètre le bon id pour chaque span.

Si je fais en dur:

Code:

---

1 2 3 4

addEvent(v[0],'click',function() { ShowEditInPlace(v[0].id); }); addEvent(v[1],'click',function() { ShowEditInPlace(v[1].id); }); addEvent(v[2],'click',function() { ShowEditInPlace(v[2].id); });

---

Après le for, en enlevant la ligne addEvent du for, ShowEditInPlace aura à chaque fois le bon paramètre si je clic sur un des spans = c'est le comportement que je voudrais avoir.

Une idée de pourquoi celà ne marche pas lorsque je le fais dans le for?

oui sujet déja discuté et résolu et doit d'ailleurs figurer dans la FAQ ..
je recherche ...

[edit]
trouvé
http://javascript.developpez.com/faq...lick.dynamique

Merci SpaceFrog :ccool:

Une autre solution :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function EditInPlace() { var v=getElementsBySelector("span.editinplace"); var l=v.length; for(i=0;i<l;i++) { var buildFunction = function() { return function() { var id_span = v[i].id; ShowEditInPlace(id_span); } } addEvent(v[i],'click',buildFunction()); } }

---

Je ne sais pas s'il y a une "meilleure" solution, mais le fait d'attacher une propriété à un élément html me "gène", mais c'est du chipotage... :zoubi:

A+

On peut faire beaucoup plus simple

Code:

---

1 2 3 4 5 6 7 8

function EditInPlace() { var v=getElementsBySelector("span.editinplace"); var l=v.length; for(i=0;i<l;i++) { addEvent(v[i],'click',ShowEditInPlace); } }

---

vous allez me dire que la fonction ShowEditInPlace ne sait pas sur quel objet travailler
c'est très simple this

je suppose que ta fonction ShowEditInPlace prend l'id en argument et fait un getElementById pour retrouver le span

alors que this est l'élément en question pas besoin de le chercher
pour t'en convaincre fais ceci

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

function ShowEditInPlace() { alert(this.id); }   function EditInPlace() { var v=getElementsBySelector("span.editinplace"); var l=v.length; for(i=0;i<l;i++) { addEvent(v[i],'click',ShowEditInPlace); } }

---

généralement quand je fais ça je fais en sorte que le nom de la fonction me renseigne sur le fait que c'est un gestionnaire d'évènement.

si tu tient à ce que ta fonction ShowEditInPlace reste une fonction normale
tu peux faire

Code:

---

1 2 3 4 5 6 7 8

function EditInPlace() { var v=getElementsBySelector("span.editinplace"); var l=v.length; for(i=0;i<l;i++) { addEvent(v[i],'click',function() {ShowEditInPlace(this.id)}); } }

---

A+JYT

Citation:

---

Envoyé par BaBeuH

le fait d'attacher une propriété à un élément html me "gène", mais c'est du chipotage...

---

Tu n'attaches pas une propriété à un élément HTML mais à un objet JavaScript de type HTMLElement, or l'intérêt d'un objet est bien de lui affecter des propriétés et des méthodes. Je ne vois donc pas ce qu'il y a de gênant ;)

c'est un truc que je ne comprends pas moi aussi
on vois partout des dev où on crée des variables des objet des fonction globales qui ensuite font des recherches dans le DOM pour manipuler les objets de la page

alors que le DOM à été conçu pour ça pour porter les méthodes et les attributs des éléments.

c'est tout de même beaucoup plus facile d'attacher les attribut et les méthodes à l'objet qui en est le porteur plutôt que de les mettre ailleurs pour ensuite essayer tant bien que mal de retrouver ses petits.

J'avoue ne pas comprendre cette réticence
franchement je ne comprends vraiment pas

Code:

---

1 2 3 4

<div> <a href='#' onclick="this.parentNode.style.display='none'; return flase;">close</a> .... </div>

---

et tout de même vachement plus simple est compréhensible que

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script type="application/javascript"> function closeDiv(id) { var element = document.getElementById(id); if (element) { element.parentNode.style.display='none'; } return false; } </script> ... <div id="myDiv"> <a href='#' onclick="return closeDiv('myDiv');">close</a> .... </div>

---

franchement lorsqu'on place des éléments dans des attributs et des méthodes portés par les bons éléments du DOM
les scripts fondent comme neige au soleil et ça devient d'une efficacité redoutable

A+JYT

je suis d'accord avec toi sekaijin, mais la plupart du temps on développe du générique plutôt que du spécifique ( cf l'exemple que tu viens de montrer ... )

mais c'est un autre débat :)

On s'écarte du sujet, mais par rapport au fait d'attacher des attributs au dom, je n'ai rien contre... C'est juste que je ne trouve pas ça "propre" (surement à tord vu la remarque de Bovino).

@sekaijin :
Après, le fait d'attacher directement des méthodes au objet du dom tel que tu le montres dans ton exemple, je pense que c'est un hérésie pour un puriste (je n'en suis pas un, mais j'essaye tant bien que mal à respecter certaines bonnes pratiques).

C'est peut-être plus facile pour développer pour s'y retrouver, mais il me semble préférable de séparer les "couches", HTML / CSS / JS, pour rendre les couches indépendantes.


Fermons cette parenthèse de théorie, et revenons au sujet principal :
Lorsque tu attaches un attribut à un objet de type HTMLElement tel que tu le dis Bovino, et que tu insères l'objet dans le DOM, peut-on y accéder "naturellement" ?

ex, si l'on reprend l'exemple de la FAQ :

Code:

---

1 2 3 4 5 6 7 8 9 10

function foo(){ for (i=0;i<10;i++){ var MonDiv=document.createElement('DIV'); MonDiv.innerHTML="div " +i; MonDiv.indice=i; MonDiv.onclick=function(){alert(this.indice)} document.body.appendChild(MonDiv); } }

---

Le code suivant fonctionne t-il ?

Code:

---

alert(document.getElementById("id_de_mon_div_du_dessus").indice);

---

Si oui, je vais me faire l'avocat du diable, mais on peut donc accéder et modifier les attributs librement et "corrompre" le fonctionnement ? intervertir des id par exemple ?

Je me trompe peut-être, mais si on attache une fonction créée qui contient ses propres "attributs" (tel que montrée dans ma 1ère réponse), on ne peut pas les modifier, non ? si ce n'est supprimer la fonction attachée ?

A+

Citation:

---

Lorsque tu attaches un attribut à un objet de type HTMLElement tel que tu le dis Bovino, et que tu insères l'objet dans le DOM, peut-on y accéder "naturellement" ?

---

oui si tu connais le nom de cet attribut et qu'il soit en lecture/écriture

Citation:

---

ex, si l'on reprend l'exemple de la FAQ :

Code:

---

1 2 3 4 5 6 7 8 9 10

function foo(){ for (i=0;i<10;i++){ var MonDiv=document.createElement('DIV'); MonDiv.innerHTML="div " +i; MonDiv.indice=i; MonDiv.onclick=function(){alert(this.indice)} document.body.appendChild(MonDiv); } }

---

Le code suivant fonctionne t-il ?

Code:

---

alert(document.getElementById("id_de_mon_div_du_dessus").indice);

---

---

qu'entends tu par id_de_mon_div_du_dessus ??

Citation:

---

Si oui, je vais me faire l'avocat du diable, mais on peut donc accéder et modifier les attributs librement et "corrompre" le fonctionnement ? intervertir des id par exemple ?

---

justement certaines propriété sont en lecture seule pour garder une cohérence de ton document :)

Code:

---

Je me trompe peut-être, mais si on attache une fonction créée qui contient ses propres "attributs" (tel que montrée dans ma 1ère réponse), on ne peut pas les modifier, non ? si ce n'est supprimer la fonction attachée ?

---

Effectivement , il faut les rendre publiques ou créer un objet avec des propriétés publique

Citation:

---

qu'entends tu par id_de_mon_div_du_dessus ??

---

Euh, ben c'est juste l'id du div créé dans l'exemple de la FAQ vu qu'il ne possède pas d'id, c'est juste pour l'exemple...

Citation:

---

justement certaines propriété sont en lecture seule pour garder une cohérence de ton document

---

Ces propriétés qui sont en lecture seule sont gérées par le DOM, non ? on peut créer soi-même des propriétés en lecture seule ? par exemple, la propriété "indice" peut-être déclarée en lecture seule ?

oui , il suffit que tu gère les accesseurs ( get/set ) indice sera un propriété privée et tu passeras par les accesseurs pour la setter ou récupérer sa valeur

exemple complet :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function Field(val){ this.value = val; }   Field.prototype = { get value(){ return this._value; }, set value(val){ alert("impossible d'affecter la valeur"); //this._value = val; } };     var test = new Field(); //Undefined alert(test.value); //Message d'alert test.value = "test"; //Valeur toujour undefined alert(test.value);

---

Citation:

---

Envoyé par BaBeuH

Lorsque tu attaches un attribut à un objet de type HTMLElement tel que tu le dis Bovino, et que tu insères l'objet dans le DOM, peut-on y accéder "naturellement" ?

---

Attention, tu confonds propriété d'un objet JavaScript et attribut HTML.
Effectivement, la confusion est courante car l'interpréteur DOM prototype les objets JavaScript de type HTMLElement les attributs possibles de la balise HTML. En revanche, pour des attributs incorrects (non acceptés dans la DTD), ce lien ne se fait pas, donc attribuer une propriété à un objet HTML n'impacte pas le DOM sauf si cette propriété est native de l'objet.

Pour te donner un exemple concret :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test</title> <script type="text/javascript"> function showAttr(){ var maDiv = document.getElementById('test'); maDiv.setAttribute('toto','tata'); maDiv.tata = 'toto'; alert('maDiv.toto : '+maDiv.toto+'\nmaDiv.getAttribute(\'toto\') : '+maDiv.getAttribute('toto')+'\nmaDiv.tata : '+maDiv.tata+'\nmaDiv.getAttribute(\'tata\') : '+maDiv.getAttribute('tata')); } </script> </head> <body> <div id="test"> </div> <input type="button" onclick="showAttr()" value="Tester" /> </body> </html>

---

Pour tester en ligne : http://dmouronval.developpez.com/tes...Attributs.html
;)

Citation:

---

Envoyé par le_chomeur

je suis d'accord avec toi sekaijin, mais la plupart du temps on développe du générique plutôt que du spécifique ( cf l'exemple que tu viens de montrer ... )

mais c'est un autre débat :)

---

et bien non je fais du générique et même très générique de cette façon
je vais vous donner un exemple

Un DSL pour créer des DOMElement

lorsque on a un DOMElement pour créer des fils avec des attributs qui dépendent de variable des style qui dépende des variable des méthodes etc.
on a en gros 2 solutions (les autres ne sont que des dérivées de celles-ci)
soit un crée un string et on fait un innerHTML

Code:

---

el.innerHtml = '<div width="'+ dW +'>....</div'>

---

soit on passe par les méthodes du DOM

Code:

---

1 2 3

div = document.createElement('DIV'); div.setAttribute('width', dw); el.appendChild(div);

---

la première à l'inconvénient d'être rapidement illisible et de nécessiter de concaténer les string et des variables
la seconde nécessite beaucoup de code et de variables

Si le DOMElement avait un méthode div pour créer fils un div a pour créer un fils a etc et que ces méthodes retourne le DOMElement créer il suffirait de les enchainer.
cela s'appelle un DSL

Code:

---

el.Div({width: ds});

---

plus besoin de concaténer des string ni de se palucher des create générique qui faut ensuite spécialiser pour enfin les attacher

comment faire un truc pareil en faisant des méthodes générique attachées au élément du DOM

et voilà le genre de chose qu'on peut faire

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

document.onLoad.push(function() { alert(1); }); document.Html( { lang:'fr', xmlns:'http://www.w3.org/1999/xhtml', 'xml:lang':'fr' },null, { showSize: function() { alert(this.nodeName + ': ' + this.clientWidth + ' X ' + this.clientHeight); } }) .Head({'xmlns:x':'urn:org.truc.nc'}) .Title('Test de page DOM').parentNode.parentNode .Body(null,{backgroundColor: 'rgb(128,0,0)'}) .H1('Hello',null,{margin:'auto', width:'150px', textAlign:'center', backgroundColor: 'rgb(255,255,255)'}).parentNode .P({ 'class':'corpus', id:'150', title:'corps', lang:'fr', 'xml:lang':'fr', dir:'rtl' },{ margin:'auto', padding:'15px', width:'90%', height:document.body.clientHeight - 100, textAlign:'left', backgroundColor: 'rgb(255,255,255)' },{ onclick: function() { document.html.showSize(); } }).B('World');   document.onLoad.push(function() { document.body.style.backgroundColor = 'rgb(0,128,255)'; }); document.getElementById('150').Br().Text('Somme text').Br() .AHref('sample.js', 'view code', {target:'_source'})

---

Qu'on aime ou pas les DSL ce n'est pas le sujet mais cela montre bien qu'on peut très bien faire du très générique directement dans le DOM
toute ces méthodes n'ont rien de spécifiques et sont au contraire très générique
requardez l'appel à la méthode P qui fixe des attributs, des styles et une méthode à l'objet P créé


si je procède de même pour faire un datagrid qui utilisa ajax
je vais faire un composant générique que je vais pouvoir instancier autant de fois que je veux
supposons que je le base sur un div qui contient un tableau et objet datasource qui gère ajax sur l'entête de ma colonne je vais pouvoir lui faire porter une méthode qui vas faire un tris sur le datasource
pas besoin de chercher quoi que se soit le datasource est celui du grid.

pour y accéder pas besoin de recherche c'est le datasource du div qui contient le tableau don la colonne à déclenché l'évènement donc un truc genre this.parent.parent.parent.ds
mais on peut faire encore plus simple
dans la création du grid lors de la création de l'entête de la colonne on lui ajoute un attribut ds qui référence le datasource du coup la méthode sur la colonne utilise simplement this.ds

en fait tout ce que fond les divers framework qui utilise des objets couplés à un objet du DOM sans s'y attacher et qui ensuite vont utiliser des algos de recherche sophistiqué pour retrouve leur bébé
ça se fait à l'identique et sans recherche en Attachant les élément au DOM

A+JYT