HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: HTML template partials
Lecture: Partials: A more realistic example
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let me give you a slightly more realistic, more complicated example where we get bigger winds with this partial concept.
0:08
We haven't talked about installing it yet. It's really easy to use, and we'll see in just a moment. But let's just look at one thing.
0:13
This is the final version of the app that we're building towards and there's going to be this infinite scroll section. So over here,
0:20
notice that we've got our recent videos and as I scroll, it's pulling more and more of them in.
0:25
Okay. So this implementation of, I need to show some of the videos right at the beginning and then as I scroll, I need to bring more and more in.
0:33
Well, that's a beautiful htmx thing that we're going to add. But what I want to show you is what does the code look like. This page
0:44
is the page we were just looking at, all of it. That's all of the HTML right there.
0:49
Now there is this partial section that's going to show you the videos. So here are the videos that are going to show up, and we're gonna show, we're
1:00
gonna go through each one, and we have a way to show the video. So there's these three levels of these partials, but taken as a whole,
1:07
they're quite simple and that is the entire HTML that we need to write to make that cool infinite scroll happen with zero
1:15
HTML duplication. Fantastic, right? Well, probably it's complicated on the server, right? Nope. That is the entire server-side implementation.
1:24
Here's the one that loads up the original page and then when it comes back, when htmx comes back, it just, it's going to ask for a partial and
1:33
say what page, what section it needs to get in this partial scroll and then directly render one of the smaller pieces.
1:41
Amazing, so this is the kind of code we're going to be able to write and we will write later as we adopt this Jinja Partials package.