Django и HTMX Я ищу не "халтурный" способ обновить класс ссылки, которая вызывает запрос HTMX. Например, "refresh-self" или что-то в этом роде.

У меня проблема с HTMX в Django. У меня есть два важных компонента на странице. Список категорий и контент, который показывается после нажатия на категорию.

Я прекрасно работал со стандартным 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>

Каждая категория имеет простой оператор if в коде шаблона django, который проверяет, выбрана ли она (на основе пути url.)

И это работает, дело в том, что при первом запросе категории отображаются дважды (что логично, так как у меня 2 include на одном HTML). После того, как я выбираю одну категорию, все приходит в норму, потому что 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 и т.д.)

Мог бы кто-нибудь мне помочь?

Самый простой способ избежать этой проблемы - определять HTMX-запрос в функции view, передавать это состояние вашим шаблонам и выводить 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 %}
Вернуться на верх