- Overview
- Transcript
3.3 Blaze Templates
We've already been briefly introduced to templates using Meteor and its Blaze front-end framework, and in this lesson we will start to build our own templates for the site.
1.Introduction1 lesson, 00:34
1.1Welcome to the Course00:34
2.Up and Running With Meteor3 lessons, 10:36
2.1What Is Meteor?02:27
2.2Installing Meteor03:37
2.3Creating Your First Meteor App04:32
3.Building a Website With Meteor5 lessons, 36:08
3.1Making Simple Changes03:53
3.2HTML and CSS09:28
3.3Blaze Templates03:53
3.4Injecting Data Into Templates09:21
3.5Restructuring Files09:33
4.Working With Dynamic Data9 lessons, 1:21:35
4.1Collections14:10
4.2Responding to Events06:36
4.3Adding User Posts07:14
4.4Secure Database Methods08:41
4.5Formatting Dates05:48
4.6Deleting Posts13:48
4.7Editing Posts09:54
4.8Setting Up User Accounts06:22
4.9Managing Users09:02
5.Conclusion1 lesson, 00:35
5.1Final Thoughts00:35
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.