HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: HTML template partials
Lecture: Removing duplication of add video HTML

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Now that we have our partials around,this idea of the Jinja Partials and we've actually
0:07 already created that. Remember over here we have our show add form, this one. The HTML required to show the form, and in our category here, we're
0:19 gonna load up the page and say here's the add a video button. Now, if this was changed somehow, we forgot to change it in both places.
0:29 Obviously that's going to be a problem because remember over here we have a duplicate of this. Go on and run and just have a quick look.
0:36 We go over here and say I want a new video and you go cancel add a video. Wait a minute. That's weird. Why did that happen?
0:44 It happened because we have the same basic thing in two places. We don't want that. That's a problem.
0:50 So we're going to employ our partials in order to fix this. So let's go down here, and we're just gonna say into this section, a string goes
0:58 render_partial. I do wish we had auto complete, but we don't. And in there what we're going to put is relative to the template folder,
1:08 the partial. So I'm gonna say over here and copy path from content root. That's probably close but not quite right because we don't want templates.
1:20 So we want videos, partials show_add_form and then the data that we have to pass over. Let's look at this.
1:25 It needs a cat_name. And what we have available is this category.category. So we're going to say cat_name equals this.
1:40 And let's delete this. Beautiful, let's go down here and make sure this is add a new video. I want to make sure that it says something different so
1:50 I'm gonna refresh it. You're like yes, it's definitely using this one, right here.
1:55 All right. So we can wrap this around if the, if the wrapping gets too much. My phones are really big.
1:59 My screen is small to record, so normally it would fit. But what this, will do that. Okay, let's rerun it. Come down here. Refresh this. Look at that,
2:11 add a new video. Where did that come from? That came from this render partial which, I'm going to roll it back a little,
2:19 like this. It came from this render_partial line right ther, and we passed over category.category and it became category or cat_name over here.
2:30 I love it, so works, perfect. Let's go and add a new video. It's like cancel, add a new video. It's using just this one piece right here.
2:42 We've got our partials that were rendering in line when the page is loading,
2:48 we call it over in the views, we're rendering this one when we get the page itself. But then we have our add cancel.
3:00 We're just going to render that partial view back as if it was a whole page
3:04 and this is the part where the macros really doesn't hang together very well.
3:08 We're just rendering this page back directly out of the view and that's it. Again. This is not that complicated of an example,
3:17 the ability to, you know, sort of do a cancel and get this tiny bit of HTML back. But that infinite scroll one, where we're going,
3:24 if we didn't have this functionality, that would be a huge pain to make that work.
3:28 I hope you like this ability to basically treat parts of our HTML like functions and
3:36 render it in different places. This is massively useful regardless of whether you're doing htmx,
3:40 but it's especially important because we do this kind of stuff so often, show the main page where it needs some of the partial data and then
3:49 show it again with possibly different data directly.

Talk Python's Mastodon Michael Kennedy's Mastodon