Как заставить цветную анимацию htmx работать с Django?
У меня есть простой проект Django. Я пытаюсь заставить этот пример элемента изменения цвета HTMX работать. https://htmx.org/examples/animations/
Я скопировал и вставил точный код, который они используют, в свой файл Django index.html:
<style>
.smooth {
transition: all 1s ease-in;
}
</style>
<div id = "color-demo" class = "smooth" style = "color:red"
hx-get = "/colors" hx-swap = "outerHTML" hx-trigger = "every 1s">
Color Swap Demo
</div>
<script>
var colors = ['blue', 'green', 'orange', 'red'];
onGet("/colors", function () {
var color = colors.shift();
colors.push(color);
return '<div id = "color-demo" hx-get = "/colors" hx-swap = "outerHTML" class = "smooth" hx-trigger = "every 1s" style = "color:' + color + '">\n'+
' Color Swap Demo\n'+
'</div>\n'
});
</script>
Это распечатывает следующее:
Но в отличие от того, что показано в демо, он не меняет цвета каждую секунду.
Моя командная строка для сервера Django выдает эту ошибку каждую секунду:
Почему это происходит и как я могу это исправить?
Я не делаю. Как мне создать его для приведенного выше примера?
Напишите функцию представления, которая возвращает div с цветом. HTMX заменяет новый div старым. Если новый имеет другой цвет, то срабатывает анимация, и вы видите переход 1 с.
Ответы 1
Вы получаете сообщение об ошибке, потому что URL-адрес недействителен. Вам нужно использовать правильный путь в hx-get к существующему представлению (что-то вроде hx-get = "{% url 'colorapp:color_swap' %}"). Кроме того, ваша функция просмотра должна возвращать div с цветом, который меняется каждую секунду. Вы можете использовать цикл или просто изменить цвет в зависимости от текущего времени в секундах.
Вы можете сделать что-то вроде этого:
URL.py:
from django.urls import path
from .views import views
app_name = "colorapp"
urlpatterns = [
path("", views.index, name = "index"),
path("color_swap/", views.color_swap, name = "color_swap"),
]
просмотров.py:
from django.shortcuts import render
import time
def color_swap(request):
now = round(time.time()/2,0)
print(now)
if (now % 2) == 0:
color_name = "red"
else:
color_name = "blue"
return render(
request=request,
template_name = "colorapp/color_swap.html",
context = {"color_name": color_name}
)
swap_colors.html:
{% extends "base.html" %}
{% block content %}
<style>
.smooth {
transition: all 1s ease-in;
}
</style>
<div id = "color-demo"
class = "smooth"
style = "color:{{color_name}}"
hx-get = "{% url 'colorapp:color_swap' %}"
hx-swap = "outerHTML"
hx-trigger = "every 1s">
Color Swap Demo
</div>
{% endblock %}
base.html
<!doctype html>
<html lang = "en">
<body>
{% block content %}{% endblock content %}
<script src = "https://unpkg.com/[email protected]"></script>
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
</script>
</body>
</html>
В зависимости от вашего варианта использования может быть проще реализовать это без запросов к серверу, используя локальный javascript.
Я увидел это немного поздно, но большое спасибо за это
У вас есть конечная точка
/colorsв вашем проекте? Если нет, вы должны либо создать его, либо удалить из кода.