Now, templating is usually used to format repeating items, but it's not exclusively used for that. If you have a set of data that is just a bunch of data fields and there's only one collection of those data fields, templating may be useful for you, as well. But usually that's what you'll see it used for is taking repeating data records and then merging them with some kind of layout, which is then presented to the user. Now, the templating engines that we're going to see in this course give you varying degrees of control and flexibility based upon how complex your templating needs are.
So, how you might go about this instead is you might want to have the data coming from a separate source. So, in this case, you might have the name, the phone, and the address in some JSON-based format, which I've got here. And then you have the HTML, which is kept separate from the data. Now, notice that the data has no idea how it's going to be laid out. There's no notion of the name being bold or italic. There's no notion of the phone number being laid out at a certain place or way. And that's really nice, because now you can change the presentation without having to worry about how the data needs to be formatted, for the most part.
Now, both of these will be fed into some kind of template engine. So, the template engine will take the data, and it will take the layout. And you notice in the layout, I've got some way of specifying placeholders where various pieces of the data record are going to go. And we'll get more into that as we go through the course. So, don't worry about that syntax for just now. We'll see how the various template engines do that. Just understand that there is a way inside the HTML to specify, hey, here's where this piece of the data record is going to go.
So, these two pieces of information are fed to the template engine. The template engine then evaluates the data. And inserts the results into the HTML. And that produces the finished result. So, here, we've got the data and the layout coming together. And then we have a finished HTML snippet that we can then put into the document. Okay, so we can see an example of this in real life by taking a look at an application that a lot of people use and presents repeating data items over and over and that's Twitter. So, let's go over to the Twitter website.
So, here on the Twitter website, let's do a search on something that we know will produce a lot of good results. Let's search for the HTML5 #. So, you can see here in the results that we've got some tweets all having to do with HTML5. And you notice that the format of each one of these is strikingly similar. On the left-hand side, there's some kind of icon. Then there's the person's name along with their Twitter handle.
How long ago the tweet was posted. The content of the tweet. And then some controls. And if you scroll down, you'll see that a lot of these pretty much look like that. Here's one, however, that has an embedded link. Here's one that has an image in it. But you notice, not all of them have images. Not all of them have embedded links. But they can accommodate that. You see that a pattern is emerging. It's icon, name, handle, time, and then content. So, each one of these is the result of data being merged with a small template snippet, which is contained in each one of these boxes, and then laid out on the web page.
So, you can see that templating comes in handy in some real world examples. And this is the kind of thing we're going to be looking at as we go through the course.
- What is templating?
- Defining templates in jQuery Template
- Using simple Mustache templates with sections and conditions
- Adding conditionals and loops to Handlebars templates
- Working with Dust templates