Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.6 hours
  • Overview
  • Transcript

4.3 Handlebars

Dynamically adding complex content to the page used to be a tedious process. Now we use templating engines. Handlebars is one of these engines.

Related Links

1 lesson, 00:40

Free Lesson

2.Code Editors
3 lessons, 23:10

Free Lesson
GitHub's Atom

Adobe's Brackets

Microsoft's Visual Studio

3.Runtime Environments
1 lesson, 10:41

Browser Development Tools

4.JavaScript Components
3 lessons, 39:01




5.Node Packages
2 lessons, 23:47

NPM and Browserify


1 lesson, 00:42


4.3 Handlebars

One of the most fundamental things that we do with JavaScript, is dynamically add content to the page. And we've drastically changed the way that we have done that, to the point now that we use templating engines to generate the HTML that we want to add to the page. And the one that has withstood the test of time is called Handlebars. You can get Handlebars by going to handlebarsjs.com. And then clicking on the download link. And that's all that you need to do to get it. That of course you need to add it to your page, but once you've added it, you are ready to go. So we're going to write a quick little page, that's going to display some data that we would normally get from the server. So I have this file called data.js, and this is supposed to simulate going out and getting data from the server, which would be in JSON format, and then we would convert that into a JavaScript object or an array. So instead of doing all of that, these Is functions that are in this file, are simply going to return the JavaScript object or the JavaScript array. The first one that we're going to work with is called getPost, and we give it an id, and it uses id throughout this object that it's going to generate. This object, which I'm going to call a post object, has a property called ID. One for title, one for author, and author is an object with a name property, and then we have content, which is the post content, and then comments, which is an array of comment objects. These comment objects have an ID, the name of the person leaving the comment, and then the content of that comment. So we want to display this post that we are going to create, by calling get post, and Handlebars is going to make that very easy. So I've added data.js to this file. I've also included jQuery. Now jQuery is not required to use Handlebars, but it does make things a little bit easier. Then of course we need Handlebars. So the first thing we need to do is define the template that we want to use for displaying an individual post. A template is inside of a script element. We give it an id, which I'm going to call post-template. And then we also need to set the type. Because otherwise the browser is going to try to execute this as JavaScript code, and it's definitely not JavaScript. So the type Is actually shown here in IntelliSense. It is this text/x-handlebars-template. That's what we want. So, text/x-handlebars-template. And then, inside of this script element, we are going to have our template. The majority of it is going to be normal HTML. So we want every post inside of a div element, and we also want to display the title of that post. And we do so with two sets of curly braces, or you could call them handlebars if you wanted to. But we have two opening, and then two closing, and then inside of these, is the name of the property of the object that we were wanting to display, so this is for displaying an individual post. For the title of the post object, we have the title property, so we simply type in title, and this directly relates to the title property on our, what's called a context object. So if we wanted to display the content, we would do the same thing. We would have two sets of curly braces, and inside of them we would have Content. So. let's start with this template and let's display some data in the page. So, let's start by adding another script element. This is going to contain our JavaScript code that's going to get this template. We have to then compile the template. But once we have a template that is compiled, we can use it. So first of all, we need to get the template source code, that is of course the content within this script element. So I'm going to create a variable called template source, and we're going to get what is essentially the inner HTML of this script element. So we want to select the element which has an ID of post -template. And then we want to get the HTML, so we would call the HTML method. Once we have the source code, which right now, templateSource is a string, we want to compile this source code into an actual Handlebars template. So I'm going to create another variable called template, and we're going to compile this source code. To do that, we use Handlebars, and it has a method called compile. We pass in the source code, which is our templateSource. And this is going to compile that source code into a template, and template is going to be a function. So what we end up doing, Is calling this template function, and passing in the data that we want to generate the HTML for. So we have that getPost function. Let's pass in an ID of one, and this is going to return the generated HTML, or the generated output from this template. So let's call this variable HTML, we call template, passing in our post object, and then we simply want to simply display this HTML in the browser. So I have an element with an id of output, and we're going to use that to output this information. So we will get to that element, we will call the HTML method, and pass in our HTML. So whenever we go to the browser, and we refresh, we see the title, Post 1, and then we see the content, this is a post with id of 1. Well now we want to display the author information. So lets do that after we display the title, and lets do this with an H4 element. Now if we go back and look at the object that's being returned, Author is a property of our post object. And it has a property of name, so this is very logical In order to get the name of our author, we use author.name. That makes complete and total sense, so if we go back and look at this in the browser. We of course see the author's name. Let's add a by there. So we know that this is by our author. Well now we have some comments that we want to display. In this case we have two comments. So our comments is an array. And of course it doesn't make sense to hard code this template Ty display two comments. So instead we want to essentially iterate over these comments that we have in this array. Let's first of all add an H1 element with comments as its content. And when we want to iterate over our comments. And we do that with what's called a helper. A helper begins with a pound sign, and there's a built in helper called each, this is going to iterate over each element within the array. And in our case, our array is called comments, because that is the property name of our post object. So, for each comment, let's generate the content of that comment. And that is simply with content, because we are essentially in a block of code that is scoped within comments. And whenever we look at our comments array, each of these comment objects have a property called content. So inside of this each block, which we have to close with /each, we are now within the context of each individual comment object. So let's save that, let's go back to the browser, and refresh. You will now see our two comments. We have great post, and then thanks for the info. But that in and of itself isn't very helpful, because we would like to know who wrote those comments. So let's add an H3 element, which is going to contain a link. Now of course this link isn't going to work, because weu don't have any of these files. But this is going to be a link to each individual comment, so that URL would kind of look like this. We would have posts, and then we would have the ID of this post. Now, we can't use ID here, because remember that we are within the scope of our individual comment object that we are displaying here. And each comment has an ID property. So we need to reference the ID property of our post object. And we do that with very logical syntax. It is ../ and then the name of that property, which is id. So this is going to display the id of our post, but then we also want to use the id of our comment, and to do that, we use id, and then we can output the name. As the content for this link, and then they have their content. And so whenever we view this within the browser, we're going to see the post information. Then we have our comments. Jacob Smith wrote, Great post! And if we look at the URL, we see that this takes us to posts/1, which would ideally be the URL that we have for this page, and then #1. If we look at the other link, Same URL, except it's pound + 2. Or rather hash + 2. Alright, so we have a template for displaying an individual post. But let's go back and let's look at this data.js. We have another function called getPosts, which returns an array of post objects. And the first one is pretty identical to the one that we've been working with. It has two comments and of course, ID title, author and content. But if we look at the second one, we have ID, title and author and content. But we no comments. So if we want to use this template that we've created, we need to make some adjustments here. Because if we don't have any comments, there's really no need for displaying this information. But we'll get to that here in a few moments. So we have a template for displaying an individual post. Now we need a template for displaying a list of posts. So we're going to create another template. That means we add another script element. Let's set the id to posts-template, and then of course the type is going to be the same thing, text/x handlebars template. And this is going to be for displaying a list of posts, so we could use each here. But what do we use as the property name? Down here it was rather easy, because we actually have a name, comments, that's the name of the property of the post object, but we don't have that in this case. Because the data that's going to be passed for this template, is going to be an array. But here, thinking from a JavaScript perspective, we can simply use this. This is going to refer to the object being passed to this template. So, in this case, it's the array. But down here in the comments, if we used this here. If we did this.id. Then that would refer to the ID of the comment object that we are displaying. But we don't have to do that here, cuz we simply just have to use the name of the property. So for each this, and then let's go ahead and close this each. We want to display an individual post. Now we already have a template here. So we want to reuse this template. So we can convert this into what's called a partial template. And to do that we use our handlebars object. This has a method called register partial. And then we pass in the name that we want to give this partial template. And then we need to provide the source code. So we are essentially compiling a template, but we are making it a quote on quote partial template. And we already have that source code. We have it as template source. So let's go ahead. And let's pass that here. Although now that this is a partial source, let's change this to partial templateSource, and then let's pass that there. And then in order to use this template inside of this posts-template. We use our pair of curly braces, and then we use a greater than sign, and then the name of the partial template. This is the syntax of referencing a partial template. So, we basically tell Handlebars that this template is a partial template called post. We're going to use that for each element in this array, so now we need to get the source code for this template. We need to compile it, and then we can display a list of posts. So we're going to change this code somewhat. We're going to add another variable called templateSource. Which is what we had before, but now, this is going to be the source code inside of posts-template, and we went to get that html. We are no longer going to compile our partial template source that we did before. Instead, we are going to compile the template source, which is our posts-template. Now let's change the name of this ID. let's do posts, Dash list, dash template. That way it's a little clearer as to what we're doing. But now our template is expecting an array of post objects. So, we're not going to use getPost here. Instead we're going to call getPosts. And then we're going to output that information. So if we go back to the browser and refresh, we should see our list of posts. We have post one, the author, the content and the comments. And then we have post two, the author, the content. But then we have comments, and in this case we don't want to display the comments, because we don't have any there. So to do that, we can use another helper called if. And this works a lot like the if statement within Java Script. If we have a false e value, then if is going to be false. So if comments has any elements within the array, then it is truth e. If it's empty, then it's false e. So if we have comments, then we are going to display the comments. If not, then we won't. So we have our helper if, then we close it down here. If we go back to the browser and look at this, we have Post 1 and its comments. And then we have Post 2 and no comments. And we can also do the reverse. Instead of if, we could use unless. But that's not what we want, because as I mentioned that is the reverse of if. Now we don't see the comments for Post1, but we do for Post2. And there's also an else that we could use. So we could add else, and then we could have a link. I'm not going to worry about the URL. So it's just going to be foo.html. But then we could have leave a comment. So that if there is comments they are displayed. If there's not, then we prompt a user to leave a comment. And so once again, we have our Post 1 with it's comments, but then we have Post 2. And since it doesn't have any comments, we are prompting the user to add a comment. So any time that you need to dynamically add content to a web page. You should be using a templating engine, because it makes sense to do so. They are incredibly fast, and incredibly easy to use, and frankly it makes our work easier.

Back to the top