Daniel Roy Greenfeld: TIL: Verwendung von hx-swap-oob mit FastHTML

Der bereitgestellte Code demonstriert die Verwendung von HTMX, einer JavaScript-Bibliothek, in Verbindung mit FastAPI und FastHTML. Der Code erstellt eine einfache Kontaktlisten-Anwendung mit einem Formular zum Hinzufügen neuer Kontakte. Die Anwendung verwendet HTMX, um die Kontaktliste dynamisch zu aktualisieren, ohne dass ein vollständiges Neuladen der Seite erforderlich ist. Die Funktion mk_row generiert eine neue Tabellenzeile mit dem bereitgestellten Namen und der bereitgestellten E-Mail-Adresse und enthält ein HTMX-Attribut, um die Zeile am Ende des DOM-Elements #contacts-tbody einzufügen. Die Funktion index gibt die Hauptanwendungsseite zurück, die die Kontaktliste und das Formular zum Hinzufügen neuer Kontakte enthält. Die Funktion contacts verarbeitet die Formularübermittlung, gibt eine Meldung auf der Konsole aus und gibt die neue Tabellenzeile zurück. Die Formularübermittlung wird von HTMX verarbeitet, das eine POST-Anfrage an den /contacts-Endpunkt sendet und die Kontaktliste aktualisiert, ohne die Seite neu zu laden. Das Attribut hx_swap_oob wird verwendet, um anzugeben, wo die neue Zeile eingefügt werden soll, und das Attribut hx_on__after_request wird verwendet, um das Formular zurückzusetzen und sich nach der Übermittlung auf das Namensfeld zu konzentrieren. Die Anwendung verwendet FastAPI, um die Anwendung bereitzustellen, und FastHTML, um die HTML-Elemente zu generieren. Der Code ist so konzipiert, dass er in einem Browser angezeigt wird, um das Verhalten der Anwendung zu überprüfen.