使用 HTMX 和 Django 创建待办事项应用程序，部分无限滚动

大家好，我们又见面了啊~本文《使用 HTMX 和 Django 创建待办事项应用程序，部分无限滚动》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

本教程是学习使用 Django 和 htmx 实现无限滚动的第七部分。我们将遵循 htmx 文档，逐步实现待办事项列表的无限滚动功能。完整系列教程可在 dev.to/rodbv 查看。

更新部分模板以支持多项目加载

实现无限滚动需要一次返回多个待办事项（项目的下一页），并将其加载到现有部分模板中。这需要修改部分模板的结构。当前模板渲染单个待办事项，如下图所示：

我们需要调整结构，使部分模板包含循环：

修改 core/templates/index.html 模板：

# core/tests/test_view_tasks.py

...之前的测试...

@pytest.mark.django_db
def test_tasks_pagination(client, make_todo, make_user):
    user = make_user()
    client.force_login(user)

    # 创建两页数据
    for i in range(PAGE_SIZE + 3):
        make_todo(title=f"Todo #{i}", user=user)

    response = client.get(reverse("tasks"))

    context = response.context
    assert context["next_page_number"] == 2
    assert len(context["todos"]) == PAGE_SIZE

    # 添加头部以确保将其作为 HTMX 请求处理
    response = client.get(reverse("tasks") + "?page=2", HTTP_HX_Request="true")

    content = response.content.decode().strip()
    assert content.startswith("<") # ...

现在就完成了！这是迄今为止我使用 htmx 最有趣的体验。本文的完整代码在这里。

下一篇文章，我可能会考虑使用 Alpine.js 添加一些客户端状态管理，或者添加“截止日期”功能。敬请期待！

今天关于《使用 HTMX 和 Django 创建待办事项应用程序，部分无限滚动》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！