Nous avons déjà vu comment utiliser jQuery pour accéder à des données en ligne via Ajax puis générer du code HTML à la volée.
Pour faire comme avec l'exemple Fetch API + VueJS, je vous propose une version utilisant un template html sous forme de <DIV> cachée dans le code source. C'était notamment utilisé par jQuery Mobile et certains sites permettant de créer des applications mobiles par drag and drop de ses "composants HTML". Un fonctionnement "no code" inspiré d'outils comme Delphi ou Visual Basic avant que le terme "no code" ne soit à la mode et que la technique ne soit devenue "révolutionnaire" aux yeux du monde alors qu'on code comme ça sous Windows depuis 1995...
Le principe est simple : au lieu d'utiliser un moteur de templates comme VueJS on va utiliser jQuery pour appliquer nos modifications quand on en a.
En revanche c'est plus complexe à mettre en oeuvre que VueJS puisque c'est à nous de gérer les blocs affichés ou à afficher. On ne bénéficie pas de l'automatisation liée au binding entre variables JavaScript et éléments du DOM proposé par VueJS.
Bien entendu rien n'empêche d'utiliser jQuery pour la partie Ajax et VueJS pour l'affichage. Après tout tant qu'on a du HTML accessible dans le DOM et du code source JavaScript dans la page tout reste possible.
Je vous propose donc un exemple d'alimentation de page en jQuery à partir d'une API du catalogue de livres Delphi Books. La partie Ajax est inspirée de l'exemple précédent. La partie affichage d'une liste reste la même, l'affichage de la seconde liste passe par un <DIV> masqué en guise de modèle de code HTML. Ca permet de voir les deux techniques.
Le code source de cet exemple est disponible sur le dépôt de code. La vidéo explique son fonctionnement et montre les étapes pour y parvenir.
Certaines informations n'ont pas été affichées. Vous devez vous connecter pour y accéder.
