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

这是该系列的第 7 部分，我将在其中记录我使用 Django 学习 HTMX 的过程，其中我们将按照 HTMX 的文档来实现待办事项的无限滚动功能。

如果您想查看该系列的其余部分，请查看 dev.to/rodbv 以获得完整列表。

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

当我们实现无限滚动时，我们将必须返回几个待办事项（项目的下一个“页面”）并将它们加载到我们当前拥有的部分模板中。这意味着稍微改变我们的部分模板的组成方式；目前的设置如下图所示，其中部分模板负责渲染单个待办事项：

我们想要反转顺序，使部分围绕 for 循环：

让我们在模板 core/templates/index.html 中执行交换：

Soon we will get back to the template to add the hx-get ... hx-trigger="revealed" bit that performs the infinite scroll, but first let's just change the view to return several items instead of one on the toggle and create operations:

... previous code 

def _create_todo(request):
    title = request.POST.get("title")
    if not title:
        raise ValueError("Title is required")

    todo = Todo.objects.create(title=title, user=request.user)

    return render(
        request,
        "tasks.html#todo-items-partial", # 



<p>检查内容的测试仍然通过，并且页面看起来相同，因此我们很好地实现无限滚动本身。</p>

<h2>
  
  
  实现无限滚动
</h2>

<p>在模板上，我们需要向 /tasks 设置一个 hx-get 请求，其中 hx-trigger="revealed" ，这意味着只有当元素即将进入屏幕上可见时才会触发 GET 请求；这意味着我们希望将其设置在列表中最后一个元素之后，并且我们还需要指示要加载哪个“页面”数据。在我们的例子中，我们将一次显示 20 个项目。</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173613850692024.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with HTMX and Django, part infinite scroll"></p>

<p>让我们相应地更改模板：<br>
</p>

<pre class="brush:php;toolbar:false">    

There's an if next_page_number check around the "loading" icon at the bottom of the list, it will have two purposes: one is to indicate when we're loading more data, but more importantly, when the loader is revealed (it appears on the visible part of the page), it will trigger the hx-get call to /tasks, passing the page number to be retrieved. The attribute next_page_number will also be provided by the context

The directive hx-swap:outerHTML indicates that we will replace the outerHTML of this element with the set of

• s we get from the server, which is great because not only we show the new data we got, but we also get rid of the loading icon.

  We can now move to the views file.

  As a recap, here's how the GET /tasks view looks like by now; it's always returning the full template.
  

  @require_http_methods(["GET", "POST"])
  @login_required
  def tasks(request):
      if request.method == "POST":
          return _create_todo(request)
  
      # GET /tasks
      context = {
          "todos": request.user.todos.all().order_by("-created_at"),
          "fullname": request.user.get_full_name() or request.user.username,
      }
  
      return render(request, "tasks.html", context)
  

  上面的代码已经做了改动，就是按照最新的待办事项优先排序；既然我们期望有一个很长的列表，那么在底部添加新项目并将其与无限滚动混合是没有意义的 - 新项目最终将混合在列表的中间。

  我们现在需要区分常规 GET 请求和 HTMX 请求，为此我们将仅返回待办事项列表和部分模板。有一个名为 django-htmx 的库，它非常方便，因为它使用 request.htmx 等属性和所有 hx-* 属性的值扩展了请求参数，但目前这有点过分了；现在让我们检查 HTMX 标头，并使用 Django 分页器处理分页。
  

  # core/views.py
  
  ... previous code
  
  PAGE_SIZE = 20
  
  ...previous code
  
  @require_http_methods(["GET", "POST"])
  @login_required
  def tasks(request):
      if request.method == "POST":
          return _create_todo(request)
  
      page_number = int(request.GET.get("page", 1))
  
      all_todos = request.user.todos.all().order_by("-created_at")
      paginator = Paginator(all_todos, PAGE_SIZE)
      curr_page = paginator.get_page(page_number)
  
      context = {
          "todos": curr_page.object_list,
          "fullname": request.user.get_full_name() or request.user.username,
          "next_page_number": page_number + 1 if curr_page.has_next() else None,
      }
  
      template_name = "tasks.html"
  
      if "HX-Request" in request.headers:
          template_name += "#todo-items-partial"
  
      return render(request, template_name, context)
  

  我们做的第一件事是检查页面参数，如果不存在则将其设置为 1。

  我们检查请求中的 HX-Request 标头，这将告知我们传入的请求是否来自 HTMX，并让我们相应地返回部分模板或完整模板。

  这段代码肯定需要一些测试，但在此之前让我们先尝试一下。看一下网络工具，当页面滚动时如何触发请求，直到到达最后一页。您还可以看到动画“正在加载”图标短暂显示；我已将网络速度限制为 4g，以使其可见时间更长。

  

  添加测试

  最后，我们可以添加一个测试来确保分页按预期工作
  

  Soon we will get back to the template to add the hx-get ... hx-trigger="revealed" bit that performs the infinite scroll, but first let's just change the view to return several items instead of one on the toggle and create operations:
  

  ... previous code 
  
  def _create_todo(request):
      title = request.POST.get("title")
      if not title:
          raise ValueError("Title is required")
  
      todo = Todo.objects.create(title=title, user=request.user)
  
      return render(
          request,
          "tasks.html#todo-items-partial", # 
  
  
  
  <p>现在就这样了！这是迄今为止我使用 HTMX 遇到的最有趣的事情。这篇文章的完整代码在这里。 </p>
  
  <p>对于下一篇文章，我正在考虑使用 AlpineJS 添加一些客户端状态管理，或者添加“截止日期”功能。再见！</p>
  
  
            
  
              
          

以上是使用 HTMX 和 Django 创建待办事项应用程序，部分无限滚动的详细内容。更多信息请关注PHP中文网其他相关文章！