我正在编写一个简单的网站Django，我决定尝试在客户端使用htmx库来加载 html 片段。现在我想按不同字段对列表进行升序和降序排序。我有这样的事情：
<div class="col-auto">
<div class="input-group input-group-sm">
<select id="np-sort-key" name="key" class="form-select">
<option value="publish_date" selected>Publish date</option>
<option value="title">Title</option>
</select>
<button class="btn btn-outline-dark" type="button">
<span class="bi bi-sort-down"></span> <!-- bi-sort-up for Asc icon -->
</button>
</div>
</div>
我想将order_by=<order><key>查询参数添加/替换到当前网址（例如 /articles?page=2&order_by=-publish_date。），并在“选择”更改和“按钮”单击时将其发送回 Django 视图。端点返回一个 Html，我想用 Htmx 将它与另一个 Html 节点交换。（请注意，单击按钮时应更改跨度类以显示排序是 Asc 或 Dsc）
可以使用吗htmx？如果没有，欢迎使用简单的 Javascript 解决方案。
我尝试使用 HTMX 实现无限 x 滚动，但请求被无限触发，因为触发元素被插入到 div 的左侧，并触发一个新的请求来加载 div 内的项目。
如何避免这种情况：追加新元素，但保留 x 滚动位置？我不确定这可能是 CSS 或 HTMX 问题。
<div class="flex h-full space-x-2">
<div class="bg-amber-600 flex-initial w-1/4"></div>
<div class="flex space-x-2 w-full overflow-x-auto">
<div class="flex-none w-16 ml-auto"
hx-get="/scroll"
hx-trigger="intersect once"
hx-swap="outerHTML">
</div>
<div class="bg-amber-400 flex-none w-16">0</div>
<div class="bg-amber-400 flex-none w-16">1</div>
<div class="bg-amber-400 flex-none w-16">2</div>
<div class="bg-amber-400 flex-none w-16">3</div>
</div>
</div>
我也尝试过beforebegin，它的行为是一样的：
<div class="bg-amber-400 flex-none w-16 ml-auto"
hx-get="/scroll"
hx-trigger="intersect once"
hx-swap="beforebegin">x</div>
这是一个代码笔来解释我的意思：https ://codepen.io/viggiesmalls/pen/RwQPROJ
我正在使用 Django 和 HTMX。我的一个视图收到 GET 请求并返回整个页面。但是，如果该 GET 请求来自 HTMX 元素，则视图将返回一个片段：
from django.shortcuts import render
def view_example(request):
if request.htmx:
return render(request, 'fragment.html')
else:
return render(request, 'page.html')
在page.htmlHTMX 元素中触发需要此片段的 GET 请求。它有效 - 我的功能测试看到 HTMX 请求的结果。当我在浏览器中查看它时，它也有效。但它在我的单元测试中不起作用！
我正在尝试测试两种不同类型的响应：
from django.test import TestCase
class TestRequests(TestCase):
def test_page(self):
response = self.client.get('/')
self.assertTemplateUsed(response, 'page.html')
def test_fragment(self):
headers = {'Hx-Request': 'true'}
response = self.client.get('/', **headers)
self.assertTemplateUsed(response, 'fragment.html')
test_page按预期通过，但test_fragment失败：
AssertionError：False 不是 true：模板“fragment.html”不是用于呈现响应的模板。实际使用的模板：page.html
如何模拟 HTMX 请求以便测试我的片段逻辑？
我有一个包含多个select元素的表单，其中某些元素的可用选择取决于其他元素的所选值。我正在使用 HTMX 来实现这一点。对于一个元素，我还想根据前一个元素中选择的值动态设置hx-post和属性。hx-target
我可以使用 JavaScript 成功设置属性，但是当元素更改时，请求实际上不会触发。
超文本标记语言
<form>
<select id="dropdown_A" onchange="dropdownAChanged(this.value);" hx-post="/choices/dropdown_B/" hx-target="#dropdown_B" required>
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="dropdown_B" required>
<option value="">--</option>
</select>
<select id="dropdown_C" class="inactive">
<option value="">--</option>
</select>
<select id="dropdown_D" class="inactive">
<option value="">--</option>
</select>
</form>
JavaScript
function dropdownAChanged(value) {
const b = document.querySelector('#dropdown_B');
const c = document.querySelector('#dropdown_C');
const d = document.querySelector('#dropdown_D');
switch (value) {
case '1':
makeInactive([c, d]);
break;
case '2':
makeActive(c);
makeInactive(d);
b.setAttribute('hx-post', '/choices/dropdown_C/');
b.setAttribute('hx-target', '#dropdown_C');
break; …我有以下内容index.html
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
</head>
<body id="bomb-main" class="main-page">
<div class="bomb"
hx-trigger="click"
hx-swap="outerHTML"
hx-target="#bomb-main"
hx-get="/boom"></div>
</body>
</html>
/boom返回以下响应
<body id="bomb-main" class="bomb-animation">
<h1>ka-boom</h1>
</body>
单击 时，主体将被替换，但类保持不变。
<body id="bomb-main" class="main-page">
<h1>ka-boom</h1>
</body>
如何更改 的类body？
我正在尝试使用 htmx 设置一个短暂的事件流处理程序。想象一下，例如，流式传输 chatgpt 响应或类似内容。该流将持续 10-30 秒，然后我预计它会耗尽。
有没有办法让 htmx 监听 SSE 事件类型并关闭 SSE 源作为响应？
我有一个笨重的解决方法，我有一个用于流终止事件类型的 htmx 侦听器，然后该侦听器向仅返回一个空 div 的端点发出请求，并将该 div 交换为原始侦听器，以防止它无休止地尝试重新连接到 SSE 源。
但我觉得我一定错过了一些东西，因为这看起来不太优雅。
这就是我现在拥有的，如下。它有效（大部分），但是有更好的吗？谢谢！
<div
id="chat-sse-listener"
hx-ext="sse"
sse-connect="{% url 'stream_test' %}"
>
{# This listens for the next token in the stream and appends it to the chat. #}
<div
sse-swap="message"
hx-target="#chat-message"
hx-swap="beforeend"
></div>
{# This listens for my custom EndOfStream SSE event and awkwardly replaces the entirely SSE listener with an empty div. #}
<div
hx-trigger="sse:EndOfStream"
hx-target="#chat-sse-listener"
hx-swap="outerHTML" …使用HTMX，我知道我可以每 2 秒轮询一次“/news”，如下所示：
<div hx-get="/news" hx-trigger="every 2s">div>
但页面加载后第一次触发需要2s时间。我想做的是在页面加载后立即触发对“/news”的调用，然后每 2 秒轮询一次。
我尝试过诸如以下的事情：
<div hx-get="/news" hx-trigger="on load or every 2s">div>
和
<div hx-get="/news" hx-trigger="on htmx:afterOnLoad or every 2s">div>
但这些都不起作用。我怎样才能用 HTMX 做到这一点？
（我知道这对于 HTMX 通常是一种不好的做法，因为您可以在响应中包含来自服务器的数据，但出于好奇我想知道:)）
因此，当使用 HTMX 将表单提交到我的 Django 后端时，我尝试显示一条反馈消息，指出“已添加”或“失败”。
基本上我现在拥有的是一个执行 hx-post 的表单，回复是div包含更新的信息，该信息与 .hx-post 的当前内容交换div。
<div id="list">
<!-- The stuff in here is loaded through another template, which is
the result of a successful myApp:add operation. -->
</div>
<form hx-post="{% url 'myApp:add' eid=e.id %}" hx-swap="outerHTML" hx-target="#list">
<!-- Some stuff in here -->
</form>
<div id="result">
<!-- Here I should print a message saying correct or incorrect
depending on the HTMX result (if the entry was added or there was
any kind …我有以下 html 代码
<button
hx-get="/views/users/byId/someId"
hx-target=".details">Details</button>
<div class="details">first</div>
<div class="details">second</div>
这只会改变第一个 div，第二个 div 不会改变我想用相同的类名更新底部的两个 div 如何做到这一点？
我也尝试了多个 div，但因为我们不能有多个 div 导致错误
我在一些动态生成的 DOM 元素上使用 HTMX 属性。如文档中所述，除非您致电 ，否则HTMX 无法工作htmx.process()。
当我尝试调用它时，我正确地得到了错误：
未捕获的引用错误：htmx 未定义
知道如何导入这个 htmx 变量吗？不知道文档中的示例如何工作。
谢谢！
htmx ×10
javascript ×4
django ×2
html ×2
alpine.js ×1
css ×1
http ×1
python-3.x ×1
tdd ×1
testing ×1