使用带无限滚动的分页时 HTMX 不工作

Question

我的 Django 应用程序中有一张产品卡，单击后会添加到购物车。我正在使用无限滚动和 django 分页。

但是，问题在于分页。结果的第一页与 HTMX 配合得很好。但是，第二页和之后的所有页面在点击时不起作用。检查页面后，html 似乎确实正确呈现，我可以看到 hx-get 调用具有正确的 url。但是点击后，什么也没有发生。

也许我在这里遗漏了一些明显的东西，但我们将不胜感激！

HTML

        <div class="container"
    data-infinite-scroll='{ "path": ".pagination__next", "append": ".product-card", "history":"false"}'>
        {% block content %}
        {% include 'includes/cards.html' %}
        {% include 'includes/sidebar.html' %}
        {% endblock content %}
    </div>
        <ul class="pagination mt-50 mb-70">
            {% if products.has_previous %}
                 <li class="page-item"><a class="page-link" href="?page={{ products.previous_page_number }}"><i class="fa fa-angle-left"></i></a></li>
             {% endif %}
             <li class="page-item"><a class="page-link" href="#">{{ products.number }}</a></li>
              {% if products.has_next %}
             <li class="page-item"><a class="pagination__next" href="?page={{ products.next_page_number }}"><i class="fa fa-angle-right"></i></a></li>
             {% endif %}
        </ul>

视图.py

def shop(request):
anabanner = AnaBanner.objects.all()
gender = Gender.objects.all()
categories = Category.objects.all()
colors = Color.objects.all()
materials = Material.objects.all()
query = request.GET.get('query','')
products = Product.objects.all().order_by('-pk')
if query:
    products = products.filter(
        Q(name__icontains=query)|
        Q(sub_name__icontains=query)
    ).distinct()
paginator = Paginator(products, 8)

page = request.GET.get('page')

products = paginator.get_page(page)
context = {'products':products,'categories':categories,'gender':gender,'anabanner':anabanner,'colors':colors,'materials':materials}
return render(request, 'shop.html', context)

按钮

    <div class="button">
  <div class="button-layer"></div>
  <button name="ekle" 
  href ="#"
  hx-get="{% url 'add_to_cart' product.id %}"
  hx-target="#menu-cart-button"
  hx-swap="outerHTML" 
  class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
</div>

Answer 1

在这里，我的无限滚动带有 HTMX 的 django 模式

网址.py

highlights_urls = [  
path('<slug:slug>/',  
     views.highlight_detail,  
     name='highlight_detail',  
     ),  
]  

urlpatterns = [  
     path('highlights/', include(highlights_urls)),  
]

视图.py

def highlight_detail(request, slug: str):  
object: Highlight = get_object_or_404(Highlight, slug=slug)  

template_name = 'highlight/highlight-detail.html'  
if request.htmx:  
    template_name = 'highlight/partials/highlight-detail-partial-elements.html'  

page_number = request.GET.get('page', default=1)  
paginator = Paginator(object.products.all(), settings.PAGINATION_PAGE_SIZE)  
page_obj = paginator.get_page(page_number)  

context = {  
    'object': object,  
    'page_obj': page_obj  
}  

return TemplateResponse(request, template=template_name, context=context)

高亮-detail.html

<section class="padding-top">  
<div class="container">  

    <header class="section-heading">  
        <h3 class="section-title">{{ object.name }}</h3>  
    </header>  

    <div class="row" hx-indicator=".htmx-indicator">   
        {% include './partials/highlight-detail-partial-elements.html' %}  
    </div>  

</div> <!-- container end.// -->  

高亮细节部分元素.html

{% for product in page_obj %}  
<div  
{% if forloop.last and page_obj.has_next %}  
    hx-get="{% url 'highlight_detail' object.slug %}?page={{ page_obj.number|add:1 }}"  
    hx-trigger="revealed"  
    hx-swap="afterend"  
    hx-target="this"  
{% endif %}  
class="col-6 col-sm-4 col-md-3 col-lg-3 col-xl-3">  
{% include 'highlight/includes/product-card.html' with object=product %}  
</div>  
{% endfor %}