3.3 Blaze Templates

I've taken the HTML, CSS, and JavaScript files from the last lesson and saved those in the site002 folder. And all the changes we make in this lesson will be saved in site003. So having said that, we'll get started. Let's jump into Visual Studio Code or whatever text editor you're using and if we look at our HTML, we can see some repetitive code here. And that repetitive code are these panels, and they have a class of panel-userpost. And since we have this repetitive code, one thing we can do with it is we can put it in a template, a Blaze template, and then repeat it using Blaze. And we'll show you how to do that as we move forward, but for now, I just wanna take this HTML and put it in a template. Now again, the Blaze front end frame work is the frame work that comes with Meteor. And it creates a very easy way to create templates and to fill in those templates with data. Now, we're still going to hard code for now the day that's in these templates, but later on, we're actually gonna pull in the data dynamically. So for now, let's get rid of the second, third, and fourth copies of that template. And for this one remaining template that we've got, I'm gonna cut that and we're gonna paste it down here below the body in a new template. So I'm gonna create a template tag here, and we're gonna give this a name. And since this template is going to represent a user post, let's just give it a name of userpost, singular. And then inside that template we're gonna paste our code. Now, as we saw before in the sample code that was created when our app was first created, we can create a template using the space bar syntax or the double curly bracket syntax. And actually, let me re-indent some of this. That's kind of bugging me a little bit, there we go. And so what we're gonna do is, inside this userpost container, we're going to insert our template. And the way we do that, again, is with this double curly bracket notation. And in order to insert a template, we also need a greater than sign, like so. And then after that greater than sign, I'm gonna put a space and then type in the name of the template, which in this case is userpost and then another space. So that's the basic notation for inserting a template. Now again, as we've talked about before, if we don't have this greater than sign there, then it would treat userpost here like it was a variable. And every time that variable changed in JavaScript, if it was properly bound to this page, then the content of the page would change there as well. But this is a template, so we wanna keep that greater than sign there and lets see if that works. So we're gonna save our work and jump over to our browser. And we can see our browser has refreshed cuz we now only have one post there, but we see that it does work, it is inserting that template into our body. And we can now go back to our code, grab this user post template, copy it and then paste it a few times, save our file, go back to our browser. And we see that we now have four copies of that template. Now later on, we'll talk about how we can loop through our data and we can insert as many templates as we have user posts. But for now, we're just gonna have to do it by putting this template there over and over again. So again, we've still got some hard coded data and as we move forward, we'll talk about how to make that a little more dynamic. So thank you for watching and I'll see you in the next lesson.