对于 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_str}{msg_btn}</div>""")
return render(request, "app/messages-partial.html", {"msg": msg})
以及相应的path
in urls.py
:
path("action/", views.TestView.as_view(), name = "test"),
我创建了一个简单的messages-partial.html
:
{% if msg %}
{{ msg }}
{% endif %}
所以我想要的是,当我触发视图时,{{ msg }}
被 HTMX 替换(交换)为响应内容。因此我在其他地方实现了 HTMX 部分index.html
如下:
<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 频道,友好的人们与我分享他们的知识。