Как обновить содержимое div с помощью кнопки с помощью FastHTML
Используя FastHTML, я хотел бы создать панель навигации, которая обновляет содержимое div в зависимости от щелчка по элементу.
Я написал следующий фрагмент кода, но при нажатии кнопок ничего не происходит: div #page-content не обновляется, и я не вижу журналов запуска методов GET.
from fasthtml.common import *
app = FastHTML()
@app.route("/", methods=["get"])
def index():
return Html(
Body(
Header(navigation_bar(["page1", "page2"])),
Div(page1(), id = "page-content"),
),
)
def navigation_bar(navigation_items: list[str]):
return Nav(
Ul(
*[
Li(Button(item, hx_get=f"/{item}", hx_target = "#page-content"))
for item in navigation_items
]
),
)
@app.route("/page1", methods=["get"])
def page1():
return Div("You are on page 1.")
@app.route("/page2", methods=["get"])
def page2():
return Div("You are on page 2.")
serve()
Вот сгенерированный HTML:
<html>
<head></head>
<body>
<header>
<nav>
<ul>
<li>
<button hx-get = "/page1" hx-target = "#page-content">page-1</button>
</li>
<li>
<button hx-get = "/page2" hx-target = "#page-content">page-2</button>
</li>
</ul>
</nav>
</header>
<div id = "page-content"><div>You are on page 1.</div></div>
</body>
</html>
Я думаю, что HTML генерируется правильно, поскольку атрибуты тегов, связанные с HTMX, выглядят так, как я мог видеть в онлайн-примерах. Где может быть проблема?
Как упомянул Дерек, обязательно включите библиотеку javascript htmx в раздел <head>. В вашем примере HTML не отображается включенный HTMLX, так что, возможно, проблема в этом (ссылка: htmx.org/docs/#installing)
@mariodev точно, я не мог бы сказать лучше.
Проблема действительно была связана с тем, что HTMX не был включен. Спасибо за ваши ответы!
Ответы 2
Проблемы
Во-первых, я думаю, вам нужно обернуть HTML вокруг вашего Div
@app.route("/page1", methods=["get"])
def page1():
return Html(Div("You are on page 1."))
@app.route("/page2", methods=["get"])
def page2():
return Html(Div("You are on page 2."))
Во-вторых, думаю, вам стоит добавить это в свой html скрипт, видимо без этого ничего бы не происходило, особенно с нажатиями кнопок.
См. документацию по ссылке htmx ->: htmx
Цитаты из документов
«Htmx — это независимая, ориентированная на браузер библиотека javascript. Это означает, что использовать ее так же просто, как добавить тег в заголовок документа. Для ее использования нет необходимости в системе сборки».
<head>
<script src = "https://unpkg.com/[email protected]" integrity = "sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin = "anonymous"></script>
</head>Проблема возникла из-за того, что я вручную обертывал свой компонент Body в компонент Html. Удалив компонент Html, FastHTML автоматически позаботится об упаковке, а также включит необходимые скрипты.
Вот мой обновленный фрагмент кода:
from fasthtml.common import *
app = FastHTML()
@app.route("/", methods=["get"])
def index():
return Body(
Header(navigation_bar(["page1", "page2"])),
Div(page1(), id = "page-content"),
)
def navigation_bar(navigation_items: list[str]):
return Nav(
Ul(
*[
Li(Button(item, hx_get=f"/{item}", hx_target = "#page-content"))
for item in navigation_items
]
),
)
@app.route("/page1", methods=["get"])
def page1():
return Div("You are on page 1.")
@app.route("/page2", methods=["get"])
def page2():
return Div("You are on page 2.")
serve()
Привет, что происходит, когда ты добавишь это
Html(Div("You are on page 1."))в свою py-функцию? Я имею в виду функции page1, page2, и добавили ли вы это<script src = "https://unpkg.com/[email protected]"></script>в свой код?