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