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.