使用 htmx 发送两个输入值的组合

Question

我正在用 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>

我想add/replaceorder_by=<order><key>查询参数to/in当前url（例如/articles?page=2&order_by=-publish_date.) 并在“select”更改和“按钮”单击时将其发送回 Django 视图。端点 returns 一个 Html 我想用 Htmx 将它与另一个 Html 节点交换。（请注意，单击按钮时应更改跨度 class 以显示排序是 Asc 或 Dsc）

是否可以使用 htmx？如果没有，欢迎使用简单的 Javascript 解决方案。

Answer 1

你可以这样解决：

您使用

<form hx-get="..."> 
 ...
 <input type="hidden" name="order_by">
</form>

然后您可以向用户显示一个漂亮的图标进行排序。如果用户点击图标，你通过 JS 更新隐藏的输入。

Answer 2

最简单的方法是根据输入值构建 URL 服务器端，然后使用 HX-Push 响应推送它 header:

https://htmx.org/reference/#response_headers

Answer 3

根据我对 htmx 文档的理解，htmx 为我们提供了两种发送自定义值的工具：

hx-vals 允许您将自定义参数添加到正在进行的请求中。这些参数采用 Json 对象的形式，它们的值可以是静态的或动态的（从 JS 函数返回）。例如：

<div hx-get="/list" hx-vals='js:{"order_by": concatSortOrderAndKey()}'>

hx-include 将查询指定的元素的值添加到 select 或正在进行的请求中。

对于我的问题，除了@guettli 的回答，我还可以在“select”和“button”标签上设置 htmx 参数，并使用 hx-vals 计算新的 order_by 价值。（同样通过使用 hx-boost，hx-* 东西只能在外部封闭元素上设置）。但总的来说，我认为隐藏输入是一个更好的解决方案。

使用 htmx 发送两个输入值的组合

Send combination of two input values with htmx

javascript

htmx