0

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

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

我做了很多实验，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 语句，用于检查它是否被选中（基于 url 路径。）

它正在工作，事情是，在第一次请求时，类别被渲染两次（这是合乎逻辑的，因为我在同一个 HTML 上有 2 个包含）。在我选择一个类别后，一切都会恢复正常，因为 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 等。）

有人可以帮我吗？

4

1 回答 1

2

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

对于检测，您可以使用Django-HTMX包，它在您的视图函数中提供一个request.htmx变量True，如果请求来自 HTMX。或者，如果您想手动检查：

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 %}
于 2022-01-17T03:31:21.063 回答