HTMX 用于处理来自 django 后端的消息

2024-05-16

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


对于 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 频道,友好的人们与我分享他们的知识。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTMX 用于处理来自 django 后端的消息 的相关文章

随机推荐

  • 组件的不同位置停止了类型转换

    我正在为我的主项目用 C 编写一个自定义 Control 类 有 2 个项目 一个用于我的控制项目 一个用于我的主项目 这两个项目位于同一解决方案中 我将主项目中的引用添加到控制项目中 我注意到 第一次将控件从工具面板拖到主 winform
  • CSS 边框底部的曲线

    我需要 CSS 中的这个图像 并且在这个边框内需要一个背景图像 我努力了 border radius 0 0 50 50 webkit border radius 0 0 50 50 但没有得到所需的形状 任何帮助 将不胜感激 边界半径 您
  • go中有memset的类似物吗?

    在 C 中 我可以使用某些值初始化数组memset https msdn microsoft com en us library aa246471 28v vs 60 29 aspx const int MAX 1000000 int is
  • 如何禁用 ng2-dragula 上的某些元素的拖动

    我想在顶部显示名称组并取消其上的拖动事件 如何禁用移动某些元素 例如该组名称位于顶部 我的代码是 dragulaService drag subscribe value gt console log drag value 0 我的模板 di
  • Flutter编译错误:必须返回非空值,因为返回类型“String”不允许为空 - displayString

    我的测试无法在我的 Flutter 项目引用的仅 Dart 项目中编译和运行 我收到以下错误消息 Failed to precompile test test pub cache hosted pub dartlang org analyz
  • 在 github 上下载 ZIP 时没有 .xcodeproj 文件

    我正在尝试将我的 GitHub 项目放入 Xcode 中 当我从 GitHub 下载时 zip 文件不包含任何 xcodeproj 文件 另外 即使我在 xcode 上登录 GitHub 克隆 下载时也没有 在 Xcode 中打开 选项 如
  • dart javascript 编译器 (dart2js) 如何工作?

    Dart 在其自己的 Dart VM 中运行 但您可以将其编译为现代优化的 JavaScript 但这是如何运作的呢 网上有任何文章或论文解释该过程吗 我想知道这是否是一个简单直接的元素与元素匹配 仅耗时开发 处理 或者 Dart 的某些元
  • 将 Armadillo C++ 库导入 Xcode

    我是 Mac 用户 正在尝试安装和导入 C Armadillo 库 以下是我到目前为止所采取的步骤 1 我从其网站下载了犰狳库 2 我仔细阅读了下载文件中的 Readme txt 文件 解释了如何安装它 3 我使用CMake将犰狳下载文件制
  • Android 导航回到 Activity;不要重新加载父级

    我有一个场景 我单击 ListFragment 并启动一个新的 Activity 如下所示 public void onListItemClick ListView l View v int position long id super o
  • 错误 libGL.so:无法使用 Android 模拟器打开共享对象文件

    我试图在 Ubuntu 12 04 64 位 中运行 android 模拟器 但是 我收到以下错误 Starting emulator for AVD emulatr Failed to load libGL so error libGL
  • 谷歌地图颤动检查点是否在多边形内

    我正在使用 google maps flutter 插件开发 flutter 项目 我想检查用户位置是否位于我在地图上创建的多边形内 有一个简单的方法使用 JavaScript api con tainsLocation 方法 但对于 fl
  • 了解多个进程的并发文件写入

    从这里 UNIX 中文件追加是原子的吗 https stackoverflow com questions 1154446 is file append atomic in unix 考虑多个进程打开同一个文件并向其追加内容的情况 O AP
  • NSURLCache 不缓存

    我正在使用 Xcode 6 1 6A1030 iOS7 和 iOS8 模拟器 NSURLCache 似乎没有缓存任何东西 我使用 Cache Control 标头 我的服务器返回带有 max age 6000 的 Cache Control
  • iOS 如何触发视频退出全屏后继续播放?

    我正在构建一个在 iOS 中播放视频的网站 我有一个在 iOS 中工作的全屏按钮 但是退出全屏时视频会暂停 有谁知道一种方法可以强制视频在退出全屏时继续播放 或者如何设置一个侦听器来触发视频在退出全屏时自动播放 这是我的代码
  • 获取目录中最后修改的文件

    有没有办法只选择目录中的最后一个文件 扩展名jpg png gif 或者我是否必须解析整个目录并使用进行检查filemtime 是的 你必须通读它们 但由于目录访问已被缓存 因此您不必真正担心它 files array merge glob
  • 推文按钮不出现

    我正在尝试向 html 页面添加一个 tweet 按钮 我使用 Twitter 按钮生成器中的官方代码 http twitter com about resources buttons tweet http twitter com abou
  • 自定义后缀表示法,应用/函数

    我想在 Mathematica 7 中设置以下自定义符号 这种表示法本身并不是特别有用 因此请不要建议现有的替代方案 或指出这只会节省一些击键次数 我想知道是否可以以及如何完成 目前 可以进入 f 2 2 3 f a b c Out b a
  • 当浏览器的缓存已满时会发生什么?

    当网络浏览器的缓存已满时会发生什么 可以 删除缓存中最旧的项目以腾出空间 完全停止缓存 IE Firefox Chrome 和 Safari 等主要浏览器是否记录了此行为 谷歌声称每个浏览器都使用 LRU 来决定转储什么 Here code
  • 循环遍历数组并删除项目,而不中断 for 循环

    我有以下 for 循环 当我使用splice 要删除一个项目 我发现 秒 未定义 我可以检查它是否未定义 但我觉得可能有一种更优雅的方法来做到这一点 我们的愿望是简单地删除一个项目并继续 for i 0 len Auction auctio
  • HTMX 用于处理来自 django 后端的消息

    我想使用 HTMX 来显示来自 django 后端的消息 经过大量的试验和错误 我最终得到了一个可行的解决方案 我想把它留给任何寻找它的人 另外 请随时发表您的建议 不幸的是 除了一点点example https github com ad