Une chose que l’on fait tres regulierement lorsque l’on met en place des evenements AJAX, c’est le rebind. Qu’est-ce que c’est ca ? Prenons un exemple : un ajout de commentaire en AJAX.

Mise en evidence

Voici ce qui se passe lorsque l’on charge une premiere fois la page:

1. Le DOM se charge, avec dedans la liste des commentaires existants
2. Des actions Javascript sont associees a ces commentaires (autrement dit, on bind ces commentaires).

Voici un bout de code HTML representant les commentaires (etape 1):

<div class=”comment”>Super un commentaire !</div>
<div class=”comment”>Super un deuxieme commentaire !</div>

Et l’action javascript associee aux commentaires (etape 2):

$(“.comment”).click(function () { alert(“Hi there!”); });

C’est assez simple, une alerte apparait lorsque l’on click sur le commentaire.

Maintenant, si on ajoute un nouveau commentaire en AJAX, le DOM devient :

<div class=”comment”>Super un commentaire !</div>
<div class=”comment”>Super un deuxieme commentaire !</div>
<div class=”comment”>Groooom !</div>

Probleme, lorsque je click sur le commentaire “Grooom”, l’alerte n’apparait pas, normal ! Cet element du DOM n’a pas ete bind.

On fait quoi alors?

Soit l’on effectue un bind unique (ca demande une refactorisation totale du code) sur le dernier element, soit l’ont debind tout et l’on rebind tout. Pourquoi tout debinder? Car sinon, certains elements seraient bind 2 fois, ce qui voudrait dire que l’on aurait 2 alertes par click, ce n’est pas ce que l’on veut. J’ai eu pas mal de problemes a effectuer des bind uniques, et je me suis souvent embrouille en refactorisant du code pour pallier ce probleme.

J’ai donc souvent (si ce n’est toujours) tendance a debind tout, puis a rebinder, comme ceci

$(“.comment”).unbind();
$(“.comment”).click(function () { alert(“Hi there!”); });

C’est moche non?

Si l’on a 99 commentaires, cela veut dire que jQuery va debind chacun des commentaires, puis les rebinder 1 par 1 ? Ca fait pret de 200 operations, ca va prendre du temps, c’est long, ca serait plus efficace de ne rebinder que le dernier non?

Ou pas…

Et bien en fait, on peut pallier ce probleme via une petite astuce: rajouter une classe binded a tous les elements que l’on a bind, et ne selectionner que ceux qui n’ont pas cette classe, ainsi le code devient:

$(“.comment:not(.binded)”).each(function() {

$(this).addClass(“binded”);

$(this).onclick(function () {alert(“Hi there!”);});

});

C’est certes un peu plus couteux en calculs qu’un bind unique, mais je trouve cela nettement plus lisible au niveau du code, et facile a faire evoluer.