Daniel Roy Greenfeld : J'ai appris (TIL) : Utilisation de hx-swap-oob avec FastHTML

Le code fourni démontre l'utilisation de HTMX, une bibliothèque JavaScript, en conjonction avec FastAPI et FastHTML. Le code crée une simple application de liste de contacts avec un formulaire pour ajouter de nouveaux contacts. L'application utilise HTMX pour mettre à jour dynamiquement la liste des contacts sans nécessiter de recharger complètement la page. La fonction mk_row génère une nouvelle rangée de tableau avec le nom et l'email fournis, et inclut un attribut HTMX pour injecter la rangée à la fin de l'élément DOM #contacts-tbody. La fonction index renvoie la page principale de l'application, qui comprend la liste des contacts et le formulaire pour ajouter de nouveaux contacts. La fonction contacts gère la soumission du formulaire, imprime un message à la console et renvoie la nouvelle rangée de tableau. La soumission du formulaire est gérée par HTMX, qui envoie une demande POST à l'endpoint /contacts et met à jour la liste des contacts sans recharger la page. L'attribut hx_swap_oob est utilisé pour spécifier l'endroit où injecter la nouvelle rangée, et l'attribut hx_on__after_request est utilisé pour réinitialiser le formulaire et se focaliser sur le champ du nom après soumission. L'application utilise FastAPI pour servir l'application, et FastHTML pour générer les éléments HTML. Le code est conçue pour être vu dans un navigateur pour vérifier le comportement de l'application.