Дэниел Рой Гринфельд: Я только что узнал: Использование hx-swap-oob с FastHTML

Предоставленный код демонстрирует использование библиотеки JavaScript HTMX в сочетании с FastAPI и FastHTML. Код создает простое приложение списка контактов с формой для добавления новых контактов. Приложение использует HTMX для динамического обновления списка контактов без необходимости в полной перезагрузке страницы. Функция mk_row генерирует новый строку таблицы с указанным именем и электронной почтой и включает атрибут HTMX для инъекции строки в конец элемента DOM #contacts-tbody. Функция index возвращает основную страницу приложения, которая включает список контактов и форму для добавления новых контактов. Функция contacts обрабатывает отправку формы, печатает сообщение в консоль и возвращает новую строку таблицы. Отправка формы обрабатывается HTMX, который отправляет запрос POST на конечную точку /contacts и обновляет список контактов без перезагрузки страницы. Атрибут hx_swap_oob используется для указания места инъекции новой строки, а атрибут hx_on__after_request используется для сброса формы и фокусировки на поле имени после отправки. Приложение использует FastAPI для обслуживания приложения и FastHTML для генерации элементов HTML. Код предназначен для просмотра в браузере для проверки поведения приложения.