HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Adapting the feed view
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
As I mentioned, I'm going to use Django's paginator to chunk my videos together. I need to add that as an import. Now to look at the feed.
0:15
I'm making enough changes to it that I'm just going to wipe out the old view and start fresh.
0:25
First, I grab all the videos and feed them to a new Paginator object.
0:37
If you haven't used Django's Paginator before, it takes an iterable (the query set result in this case) and a size.
0:45
I'm chunking the resulting videos into sets, two videos large. The Paginator is built for having multiple pages of results.
0:53
Here I'm doing the same thing, but a ""page"" in this case would just be the partial rendered with a subset of videos.
1:01
Paginator's terminology is all around page numbers, but in our case it really is more like chunks of data instead.
1:08
Once I've got the paginator object, I look for the page query parameter so I know which chunk of videos to feed.
1:15
If the query parameter isn't there, I use the first page's worth. URLs are people-facing, and people do tricky things.
1:35
They shouldn't be trusted. Here I'm checking the boundaries on the page number.
1:40
Our code should never generate out of range, but that doesn't mean somebody won't play
1:44
with the URL and mess things up. Once I've got a page number that I'm sure will work, I use the page method on the paginator.
2:07
Usually when I work with a paginator, I pass the page object down into the rendered page.
2:13
so the HTML is a little clearer, I've created more videos and next page items in the context instead.
2:20
The idea is the same, a signal as to whether or not there's more content, and what value the next page number is.
2:28
All that's left is to render this guy. There are two rendering cases. The second is the entire page, and the first is the partial
2:53
result. I've put a sleep statement inside the code that deals with the partial so you
2:58
can actually see things happening. The infinite scroll query now will take a little over two
3:04
seconds. Without this delay, you'd never see it happening, especially as all this is taking
3:08
place on my local machine. Let's start the server up and give this a whirl.