来自 django 后端的消息的 HTMX - 已解决

Posted

技术标签:

【中文标题】来自 django 后端的消息的 HTMX - 已解决【英文标题】:HTMX for messages from the backend in django - Solved 【发布时间】:2021-06-12 14:32:40 【问题描述】:

简介

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

【问题讨论】:

既然您解决了问题,请在下方添加一个答案,包含您想出的信息,并选择它作为正确答案。这将有助于其他人在寻找类似信息时找到此帖子! 【参考方案1】:

解决方案

对于 HTMX,我们需要 DOM 中的某个小元素,HTMX 可以使用(例如交换)。例如放置一个

<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_strmsg_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>

&lt;div id="msg"&gt;...&lt;/div&gt; 将与 msg 交换(我包括典型的django-messages 关闭按钮)。

感谢 htmx discord 频道,友好的人们与我分享了他们的知识。

【讨论】:

以上是关于来自 django 后端的消息的 HTMX - 已解决的主要内容,如果未能解决你的问题,请参考以下文章

来自 django 视图的 2 条消息 [关闭]

如何使用 HTMX 和 Django 将参数传递给视图?

如何使用 django 和 htmx 对查询集进行排序?

使用来自 Django 后端的数据创建图表/图形的最有效方法是啥

htmx 和 django 基于类的视图

如何使用 htmx 在 django 中进行不区分大小写的主动搜索