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

Posted 2023-05-07

【中文标题】使用 htmx 发送两个输入值的组合

【英文标题】：Send combination of two input values with htmx

【发布时间】：2022-01-11 19:52:38

【问题描述】：

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

我想在当前 url 中添加/替换 order_by=<order><key> 查询参数（例如 /articles?page=2&order_by=-publish_date。）并在“选择”更改和“按钮”点击。端点返回一个 Html 我想用 Htmx 将它与另一个 Html 节点交换。 （请注意，跨度类应在按钮单击时更改以显示排序是 Asc 或 Dsc）

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

【参考方案1】：

你可以这样解决：

你使用

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

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

【讨论】：

如果htmx-get 设置在<form> 上，它会如何触发？我不能只使用输入并直接在其上设置 htmx 内容吗？然后，htmx 会在 JS 改变输入值后触发。

@AlirezaFarahani 您可以通过hx-trigger htmx.org/attributes/hx-trigger 使用change 事件

我使用了隐藏输入技巧，尽管在这种情况下不会触发 change 事件，我需要以编程方式调度它。您的回答很有帮助，但我会等待 @1cg 选择接受的答案。

【参考方案2】：

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

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

【讨论】：

你能再解释一下吗？使用原始 get 请求或 htmx ajax 请求返回它？它将如何帮助我实现目标？

【参考方案3】：

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

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

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

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

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