Hx-push-url 对后退按钮点击无效

Question

我正在尝试将 Htmx 与 django 集成并实现单页应用程序行为。我正在用 htmx 重写 Djangoproject.com 投票应用程序。当我单击详细信息页面 link 时，内容加载，htmx 在地址栏中推送一个新的 url。当我按下后退按钮时，我第一次完美地进入了索引页面，之后如果我再次转到详细信息页面并单击后退按钮，url 显示索引，按钮索引内容不加载，内容与详细信息页面相同。这是我的代码

views.py

def index(request):
    latest_question_list = Question.objects.filter(pub_date__lte=timezone.now()).order_by('-pub_date')[:5]
    context = {'latest_question_list': latest_question_list}
    if request.headers.get("Hx-Request") is not None:
        return render(request, 'main/index/index.html', context)
    else:
        return render(request, 'main/index/index-full.html', context)
    
    
def detail(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    print(request.headers.get("Hx-Request"))
    if request.headers.get("Hx-Request") is not None:
        return render(request, 'main/detail/detail.html', {'question': question})
    else:
        return render(request, 'main/detail/detail-full.html', {'question': question})

index.html

<div id="index" class="">

    {% if latest_question_list %}
    <ul>
        {% for question in latest_question_list %}
        <li><div class="has-text-link" hx-get="{% url 'main:detail' question.id %}" hx-push-url="true" hx-target="#index" hx-swap="outerHTML">{{ question.question_text }}</div></li>
        {% endfor %}
    </ul>
    {% else %}
    <p>
        No polls are available.
    </p>
    {% endif %}

</div>

index-full.html

{% extends 'base.html' %}
{% block content %}
{% include 'main/index/index.html' %}
{% endblock content %}

detail.html

<div id="detail" class="">

    <form action="{% url 'main:vote' question.id %}" method="post">
        {% csrf_token %}
        <fieldset>
            <legend><h1>{{ question.question_text }}</h1></legend>
            {% if error_message %}<p>
                <strong>{{ error_message }}</strong>
            </p>
            {% endif %}
            {% for choice in question.choice_set.all %}
            <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
            <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
            {% endfor %}
        </fieldset>
        <input type="submit" value="Vote">
    </form>

</div>


detail-full.html

{% extends 'base.html' %}
{% block content %}
{% include 'main/detail/detail.html %}
{% endblock content %}

我发现浏览器控制台没有错误，终端没有错误

现在，我知道我可以在详细信息页面中放置一个后退按钮，该按钮可以将我带到索引页面。但用户不会使用它，他们只会使用设备上的后退按钮。

Answer 1

添加此 javascript 代码，您可以在用户单击后退按钮时重新加载页面：

var auxBack = performance.getEntriesByType("navigation");

if (auxBack[0].type === "back_forward") {
    location.reload(true);
}

Hx-push-url 对后退按钮点击无效

Hx-push-url doesn’t work on back button click

django

htmx