如何使htmx彩色动画与Django一起工作？

6ojccjat 于 2023-04-22 发布在 Go

关注(0)|答案(1)|浏览(132)

我有一个简单的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>

这将打印出以下内容：

但与演示中显示的不同，它不会每1秒改变颜色。
我的Django服务器命令行每隔1秒抛出一次错误：

为什么会发生这种情况，我该如何解决？

django

来源：https://stackoverflow.com/questions/76022253/how-to-make-htmx-colour-animations-work-with-django

1条答案

按热度按时间

ssgvzors1#

你得到了一个错误，因为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"),
    ]

views.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/htmx.org@1.8.6"></script>
    <script>
      document.body.addEventListener('htmx:configRequest', (event) => {
        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
      })
    </script>
  </body>
</html>

根据您的用例，在不使用本地JavaScript的服务器请求的情况下实现这一点可能会更容易。

赞(0）回复(0）举报 2023-04-22

我来回答

如何使htmx彩色动画与Django一起工作？

1条答案

相关问题

热门标签

最新问答