1

我正在编写一个简单的网站，我决定在客户端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>在当前 url 中添加/替换查询参数（例如 /articles?page=2&order_by=-publish_date.），并在“选择”更改和“按钮”单击时将其发送回 Django 视图。端点返回一个 Html 我想用 Htmx 将它与另一个 Html 节点交换。（请注意，跨度类应在按钮单击以显示排序为 Asc 或 Dsc 时更改）

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

4

3 回答 3

2

你可以这样解决它：

你用

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

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

于 2021-12-09T12:25:33.820 回答
1

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

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

于 2021-12-09T16:06:26.650 回答
0

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

  • hx-vals这使您可以将自定义参数添加到正在进行的请求中。这些参数是 Json 对象的形式，它们的值可以是静态的或动态的（从 JS 函数返回）。例如：
<div hx-get="/list" hx-vals='js:{"order_by": concatSortOrderAndKey()}'>
  • hx-include它将查询选择器指定的元素的值添加到正在进行的请求中。

In case of my problem, in addition to @guettli answer, I could set htmx parameters on "select" and "button" tag and use hx-vals to calculate new order_by value. (also by using hx-boost, hx-* stuff could be set only on outer enclosing elements). But overall, I think the hidden input was a better solution.

于 2021-12-14T12:27:21.867 回答