HTMX 및 Django를 사용하여 To-Do 앱 만들기(무한 스크롤 부분)

이것은 Django를 사용한 HTMX 학습 과정을 문서화하는 시리즈의 7부입니다. 여기서는 HTMX 문서를 따라 할 일 항목에 대한 무한 스크롤 기능을 구현합니다.

나머지 시리즈를 확인하고 싶다면 dev.to/rodbv에서 전체 목록을 확인하세요.

여러 항목을 로드하도록 부분 템플릿 업데이트

무한 스크롤을 구현할 때 여러 할일 항목(항목의 다음 "페이지")을 반환하고 현재 가지고 있는 부분 템플릿에 로드해야 합니다. 이는 부분 템플릿이 구성되는 방식을 약간 변경하는 것을 의미합니다. 현재는 아래 다이어그램에 설명된 대로 설정되어 있으며 부분 템플릿은 단일 할일 항목 렌더링을 담당합니다.

for 루프 주변 부분을 사용하여 순서를 반전시키고 싶습니다.

템플릿 core/templates/index.html에서 교체를 수행해 보겠습니다.

<ul>



<p>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:<br>
</p>

<pre class="brush:php;toolbar:false">... 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", # <-- CHANGED
        {"todos": [todo]}, # <-- CHANGED
        status=HTTPStatus.CREATED,
    )

... previous code 


@login_required
@require_http_methods(["PUT"])
def toggle_todo(request, task_id):
    todo = request.user.todos.get(id=task_id)
    todo.is_completed = not todo.is_completed
    todo.save()

    return render(
        request,
        "tasks.html#todo-items-partial",  # <-- CHANGED
        {
            "todos": [todo], # <-- CHANGED
        },
    )

콘텐츠 확인 테스트도 통과하고 페이지도 동일하므로 무한 스크롤 자체를 구현하는 것이 좋습니다.

무한 스크롤 구현

템플릿에서 hx-trigger="revealed"를 사용하여 /tasks에 대한 hx-get 요청을 설정해야 합니다. 즉, 요소가 화면에 표시되려고 할 때만 GET 요청이 실행됩니다. 이는 목록의 마지막 요소 뒤에 설정하고 로드할 데이터 "페이지"를 표시해야 함을 의미합니다. 우리의 경우에는 한 번에 20개의 항목을 표시하겠습니다.

따라서 템플릿을 변경해 보겠습니다.

    <ul>



<p>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</p>

<p>The directive hx-swap:outerHTML indicates that we will replace the outerHTML of this element with the set of <li>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.

<p>We can now move to the views file.</p>

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

<pre class="brush:php;toolbar:false">@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 요청을 구별해야 합니다. request.htmx와 같은 속성과 모든 hx-* 속성의 값으로 요청 매개변수를 확장하므로 매우 편리한 django-htmx라는 라이브러리가 있지만 현재로서는 너무 과잉입니다. 이제 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로 조절했습니다.

테스트 추가

마무리로 페이지 매김이 의도한 대로 작동하는지 확인하는 테스트를 추가할 수 있습니다

<ul>



<p>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:<br>
</p>

<pre class="brush:php;toolbar:false">... 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", # <-- CHANGED
        {"todos": [todo]}, # <-- CHANGED
        status=HTTPStatus.CREATED,
    )

... previous code 


@login_required
@require_http_methods(["PUT"])
def toggle_todo(request, task_id):
    todo = request.user.todos.get(id=task_id)
    todo.is_completed = not todo.is_completed
    todo.save()

    return render(
        request,
        "tasks.html#todo-items-partial",  # <-- CHANGED
        {
            "todos": [todo], # <-- CHANGED
        },
    )

이제 됐어요! 이것은 지금까지 HTMX로 경험한 것 중 가장 재미있었습니다. 이 게시물의 전체 코드는 여기에 있습니다.

다음 게시물에서는 AlpineJS를 사용하여 클라이언트 상태 관리를 추가하거나 "기한" 기능을 추가하는 것을 고려하고 있습니다. 또 만나요!

위 내용은 HTMX 및 Django를 사용하여 To-Do 앱 만들기(무한 스크롤 부분)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!