Django 和 HTMX 我正在寻找非 "hacky" 方法来更新调用 HTMX 请求的 link 的 class。像 "refresh-self" 或类似的东西

Question

我在 Django 中遇到 HTMX 问题。我基本上在页面上有两个重要的组成部分。单击类别后显示的类别和内容列表。

我在“开箱即用”的标准 htmx 上工作得很好。但是，当我想在单击类别 link 后添加 active css class 时（向用户显示他当前所在的位置），我开始遇到问题。

我用 hx-swap-oob 和 hx-swap 做了很多实验，但唯一有效的是：

（这是代码中最相关的部分）

<div class="col-sm-4">
    <div class="card">
        <div class="card-body" hx-boost="true" hx-target="#manual_results">
            <div id="manual_categories">
                {% include 'partials/manual_categories.html' %}
            </div>
        </div>
    </div>
</div>
<div class="col-sm-8">
    <div id="manual_results">
        {% include 'partials/manual_entries_list.html' %}
    </div>
</div>

并在 manual_entries_list.html 中：

<some html results>
        <div id="manual_categories" hx-swap-oob="true">
            {% include 'partials/manual_categories.html' %}
        </div>

每个类别在 django 模板代码中都有简单的 if 语句，用于检查它是否被 selected（基于 url 路径。）

它正在工作，事情是，在第一次请求时，类别被呈现两次（这是合乎逻辑的，因为我在同一个 HTML 上有 2 个包含）。在我 select 一个类别之后，一切恢复正常，因为 HTMX“开始理解正在发生的事情”并将类别从 manual_entries_list.html 切换到我们的主页。

就像我说的那样，我将 manual_entries_list.html 修改为：

    <some html results>
    <div class="set_size_to_0px">
        <div id="manual_categories" hx-swap-oob="true">
            {% include 'partials/manual_categories.html' %}
        </div>
    </div>

所以它总是不可见的（所以我只会有一组可见的类别）。

事实是，这是一个明显的黑客攻击。我确信需要有更好的方法来解决这个问题，但我找不到它。

（我什至尝试用普通的 javascript 来做到这一点，问题是类别在 for 循环中呈现，因此几乎不可能正确获取 ID 等）

有人可以帮我吗？

Answer 1

避免此问题的最简单方法是在视图函数中检测 HTMX 请求，将此状态传递给您的模板并仅在需要时呈现 HTMX 内容。 HTMX 将为每个请求添加一个 HX-Request: true header。

对于检测，您可以在视图函数中使用 Django-HTMX package that provides a request.htmx variable，如果请求来自 HTMX，则该函数将为 True。或者，如果您想手动检查：

def my_view(request):
    is_htmx = request.headers.get('HX-Request') == 'true'
    return render(request, 'my_template.html', {'is_htmx': is_htmx})

之后 manual_entries_list.html 模板仅在 HTMX 请求中包含 HTMX 相关内容：

<some html results>
{% if is_htmx %}
<div id="manual_categories" hx-swap-oob="true">
  {% include 'partials/manual_categories.html' %}
</div>
{% endif %}

Django 和 HTMX 我正在寻找非 "hacky" 方法来更新调用 HTMX 请求的 link 的 class。像 "refresh-self" 或类似的东西

Django and HTMX I am looking for not "hacky" way to update class of link that calls HTMX request. Like "refresh-self" or something along those lines

javascript

css

django

django-templates

htmx