Vous vous souvenez de la librairie Microsoft Ajax ? J’en avais parlé l’an dernier lors de la Bewise Day Conference (et aussi dans un post quelques temps après). Pour mémoire, il s’agissait d’une librairie pur JavaScript qui proposait notamment un repeater et du databinding en JavaScript, qui n’est jamais sorti du stade de la beta (voire même preview, je me souviens plus très bien)
Eh bien j’ai été surpris en voyant Scott Guthrie nous parler des contributions de Microsoft à jQuery. Au programme : templates clients et data binding (renommés data linking pour l’occasion, jQuery ayant déjà une fonction nommée “bind”), des fonctionnalités déjà présentes dans la librairie de Microsoft. J’ai donc eu un petit doute : cette librairie ne devait-elle pas être fournie avec le framework 4 ? Pourquoi n’est-elle pas dans Visual Studio 2010 alors qu’elle était dans les beta ? Une vérification sur la page codeplex d’asp.net m’a confirmé ce que je pensais : plus la moindre trace de cette librairie.
C’est donc jQuery qui va hériter de ces fonctionnalités plus qu’intéressantes, et finalement, c’est loin d’être une mauvaise nouvelle : même si les 2 librairies cohabitaient très bien, on n’aura finalement besoin de connaitre qu’une seule librairie, plus de risque de se perdre avec les syntaxes différentes utilisées par jQuery et MS Ajax.
jQuery Templates
Au programme donc, nous avons les templates : une version JavaScript des repeaters.
Comment ça fonctionne ? Eh bien de la manière suivante :
Il nous faut définir un template (ici dans la balise script, afin de ne pas l’afficher tel quel dans la page), et un container dans lequel jQuery injectera le html généré depuis le template :
1: <div id="contactContainer">
2: </div>
3: <script id="contactTemplate" type="text/html">
4: <div>
5: Name: {{= name }}<br />
6: Phone: {{= phone }} 7: </div>
8: </script>
Une fois le template défini, on va lui associer nos données, par exemple un tableau JavaScript dans notre exemple, mais il pourrait être intéressant de l’associer au résultat d’un appel Ajax, par exemple.
1: <script type="text/javascript">
2: var contacts = [
3: { name: "Scott Guthrie", phone: "415-555-2222" },
4: { name: "Guillaume Lacasa", phone: "05 11 22 33 44" }
5: ]; 6: 7: $("#contactTemplate").render(contacts).appendTo("#contactContainer");
8: </script>Data-linking
Seconde nouveauté, le data-linking. L’idée est de lier une propriété d’un objet avec une propriété d’un autre objet : quand on en modifie un, l’autre est modifié automatiquement. Pas de code pour cette fonctionnalité, mais vous pouvez retrouver un exemple d’utilisation sur le blog de maître Gu.
Je reviendrai plus en détail sur chacune de ces fonctionnalités, qui offrent des possibilités plus poussées que le peu que j’ai exploré à ce jour : boucles, conditions, linking mono et bi-directionnel, et combinaisons du linking avec les templates.
_507_513_514_512.png)
_506.png)