来自 django 后端的消息的 HTMX

Question

我想使用 HTMX 来显示来自 django 后端的消息，经过大量的试验和错误，我最终得到了一个可行的解决方案，我想把它留给任何正在寻找它的人 - 另外，请随时 post你的建议。不幸的是，除了 htmx-django 包中的一些 example 之外，几乎没有可用的教程 material。请务必查看示例，因为它涵盖了一些专门针对 Django 用户的基础知识！

Answer 1

对于 HTMX，我们需要 DOM 中某处的一个小元素，HTMX 可以与之一起工作（例如交换）。例如放置 a

<div id="msg">
    {% include "app/messages-partial.html" %} 
</div>

你 index.html 的某个地方。现在，如果需要的话，我们想使用这个元素来填充内容。假设我们单击一个按钮，该按钮与视图通信并发布答案。在 Django 中，响应是使用 render:

创建的

class TestView(TemplateView):
    template_name = "index.html"
    
    def get(self, request, *args, **kwargs):
        ...
        class_code = """class='alert alert-dismissible fade show'"""
        msg_str = """testmessage"""
        msg_btn = """<button type='button' class='close' data-dismiss='alert'>x</button>"""
        msg = mark_safe(f"""<div {classcode}>{msg_str}{msg_btn}</div>""")
        return render(request, "app/messages-partial.html", {"msg": msg})

和urls.py中对应的path:

path("action/", views.TestView.as_view(), name = "test"),

我创建了一个简单的 messages-partial.html:

{% if msg %}
    {{ msg }}
{% endif %}

所以我想要的是，当我触发视图时，{{ msg }} 被 HTMX 替换（交换）为响应的内容。因此，我在 index.html 的其他地方实现了 HTMX 部分，如下所示：

<div class="..."
     hx-get="/action"
     hx-swap="innerHTML"
     hx-target="#msg" >
         <button class="btn btn-primary">TEST</button>
</div>

前一个 <div id="msg">...</div> 将与 {{ msg }} 交换（我包括了典型的 django-messages 关闭按钮）。

感谢 htmx discord 频道，友好的人们在这里与我分享他们的知识。

来自 django 后端的消息的 HTMX

HTMX for messages from the backend in django

django

htmx