ダニエル・ロイ・グリーンフェルド: TIL: FastHTML を使用して hx-swap-oob を使用する

提示されたコードは、JavaScriptライブラリのHTMXとFastAPIおよびFastHTMLと併用した使用方法を示しています。コードは新しい連絡先を追加するフォームを使用して、単純な連絡先リストアプリケーションを作成します。このアプリケーションは、HTMXを使用して、ページをフルでリロードせずに連絡先リストを動的に更新します。mk_row関数は、指定された名前とメールを使用して新しい表行を生成し、#contacts-tbody DOM要素の末尾にその行を注入するためのHTMX属性を含めます。index関数は、連絡先リストと新しい連絡先を追加するためのフォームを含むメインアプリケーションページを返します。contact関数は、フォームの送信を処理し、メッセージをコンソールに出力し、新しい表行を返します。フォームの送信はHTMXによって処理され、POSTリクエストを/contactsエンドポイントに送信し、ページをリロードせずに連絡先リストを更新します。hx_swap_oob属性は、新しい行を挿入する場所を指定するために使用され、hx_on__after_request属性は、フォームをリセットし、送信後にnameフィールドにフォーカスするために使用されます。このアプリケーションは、FastAPIを使用してアプリケーションを提供し、FastHTMLを使用してHTML要素を生成します。コードは、アプリケーションの動作を確認するためにブラウザで表示することを想定しています。