7.2 Handlebars

Handlebars is another type of template which is very much compatible with Mustache, and it also lets us build semantic templates. You will also realize that it has extra features which are built along with the features with Mustache. So let's get started with Handlebars, and we will start off with the code base very similar to the Mustache. In fact, I'm going to start with a Mustache template and then change it to Handlebars. So let's start with this very simple index.html. Here you will see that there's this little script template which is type text/template, and inside here, I have an unordered list with list item name and year as the data. And as part of the scripts that we are embedding, we are calling the mustache, jQuery, and finally, script.js. And inside script.js, we first start with the data. And this is something that we already used in the previous, video. And then we have the template where we are calling the id, languages template. Then mustache will basically take in the template and the data, and basically, we are adding it to the id, div id languages which is found right here in the index.html. Great, so why don't we convert it to Handlebars? The very first thing I will do is change the title. The next thing we have to do is change the script type from text/template to text/x-handlebars-template. This is to kind of denote that anything that is coming within the script tag will basically be handlebars template. Great, and of course, instead of referring to the Mustache file, we will refer to the Handlebars file. So let me go replace this with the cdn.js file for Handlebars. So currently, I'm using the version one. Great. So that's all we need to make a change in a Mustache template, change the type, and of course, refer to Handlebars. Let's come to script.js. Firstly, of course, the data can remain the same and so will the template. But in next, when you see you're defining that HTML, instead of calling the Mustache library, we will call the Handlebars library. So we'll say Handlebars, and then we'll say .compile. And here, we will basically compile just the template. And next when we call upon the id languages, we'll pass in the HTML and we will have the parameter of data. Great, so why don't we open this up in the browser? And yup, I had a little spelling mistake so let me quickly go ahead and change this to Handlebars, and there you go, the data is viewed here. So, like I mentioned before, Handlebars comes with extra features, and one of the features it has is we can register our own helper. So, let's field one of the helpers. So, Handlebars, register, helper, and this will take in two parameters. First, we will kind of name the helper. Why don't we call it format language? And the next is it kind of passes in its own function. The function will pass in its own item, and in this case, we'll just pass in a language. And very simple, just for the sake of illustration, we will return a format, and this format will basically be embedded in the code tags. Great. So how do we now use this little helper that we created called formatLanguage in the template? So there you go, we are kind of iterating it. And instead of saying, say name, all we need to do is pass in the formatLanguage, which is the name of the helper. I had another little mistake, so I need to have helper. There you go, you notice that this is being embedded. Now obviously, this is not something that we want to display, but have it as HTML. And just like Mustache, what we need to do is have triple curly braces so that we can have an unescaped HTML. So now when I come back and refresh, there you go, you will notice that this has a code tag. So why don't we quickly go ahead and inspect element so that you see exactly what's happening. Next, we will create another sort of helper which is called custom block helper. So to do this, we will similarly start off with handlebars and then the familiar register helper. We will pass in the name of the helper, and in the case, we will call it list. We'll also pass in a function, which is the second parameter, and in this case, it will consist of two arguments versus the items, and second is the options. So, let's first initiate a variable called out, and we will basically start with unordered lists. And next, we will start the for loop. Firstly, the for loop will be initialize with a var i equals to 0. And it will also initialize with the var l, which will be items.lengths so that we know until when to iterate to. And then this i will definitely be less than l. And finally, we will do i++. And inside this for loop, we will basically add onto the out variable. So we'll say out plus, and then we will start with a list item. We will go on and refer to the options, and we will refer to each of the items. And finally, we will close off the list. Lastly, we will return out. And we will also add the closing tag of the unordered list. And after this, when we come back to index.html, this entire template can now be simplified because we have a registered, a helper called list which already comes with its own unordered list and list items for each of the item. So firstly, let's go ahead and take out the unordered list. Secondly, we obviously have to refer to the new registered helper called the list. In this case, we will include hash, and then the helper name, which is list. And, definitely next will be the languages, so that we know against what to iterate. And then we will end off list, with /list. Next, we can also do away with the list item, and I will just delete the opening and the closing list tags. Let's go ahead and look at this in the browser. And there you go, when I refresh, it obviously looks the same. But, guess what? These are all being created by the helper. Next, let's try to explore something called the parent context, or rather accessing the parent context. So let's say we have another, we are adding on to the data. And this time, we call type. And let's say we call it programming languages. So, instead of speaking languages or meta languages, we have programming languages. In the context of languages, how are we able to access the key called type? If you notice here, the name and the year, if you want to access type, you will need to go through the parent item. We will basically still use the double curly braces but similar to the directory structure of let's say accessing a relative hyperlink or relative file, we will include dot, dot and slash, and then the key name called type. And now when I come back and refresh the browser, there you go, it will include the value of type which is programming languages in this case. Now Handlebar also comes with its own helper, let's explore one of the helper and that is called each. So each will basically iterate through the languages. And we also need to end off with /each. For the sake of demo, I'll simplify this to just the name. So there you go, we are iterating through the languages using the helper called each. And now, when I come back to the browser and refresh, yup, each of the name is displayed. Now, with each, we can also access the index. We will also start off with the double curly brace, and to access the index, we'll start with the at sign, and then index. Let me just include a little dash here. And now when I come back and refresh, there you go, it will include the little indexes which start with 0 and ends with 3. Next, let's try something called the unless helper. So for this, let's just delete away all the values here. So basically, language is an empty array, something like this. And now when I come back here and I include the unless helper, so I'll just, very similar to each, I'll start with #unless and end off with /unless. So this basically says, if languages is empty, include a help statement. So maybe I'll just say do include your favorite programming language. And as long as languages is completely empty when I refresh the browser, there you go, you will see a help statement saying our, or rather encouraging us to include our favorite language. Now lastly, we will learn how to precompile our templates. Why is this necessary? If you realize, we are basically having the template here and we are using the Handlebars template to compile it in the real time in the browser. This will definitely take up some processing time [UNKNOWN] and for very large web applications, it might even cause delay. So for this case, we will include a precompiled template. So for this to happen, we will come back to the command line. And we will basically have to install Handlebars as a no package module. So to do that, we'll do Handlebars, sorry, npm install. And we can do a global install of Handlebars. Now this syntax is definitely very much similar to other npm modules that we have globally installed. Now once you do that and you query Handlebars, there you go, it will come with some helper text with some options that we can use later on. So, let me clear the command line, and this time, we will compile the Handlebars. So in order to do that, we will first have to extract away this little template that we created into a separate file. So why don't we create a separate file in this case? So, I'm gonna call a new file and call it language.tpl, and inside here, I'm gonna cut away just the template portion, and paste it right here. And then I can basically go ahead and clear the script tags. And there you go. Now we just have the div id called languages. Next, let's go ahead and compile the template. So in order to compile, we'll do handlebars, and then language.tpl, which consists of the Handlebar template. And then we'll see -f to denote the output file name. So I will call it language.tpl.js. And that's it. So when we come back to our text editor, we will see that a new file has been created, and that's called language.tpl.js. Now we need to include this file as a script source, so here we are including Handlebars and then jQuery. And after this, we will include as part of the script source, we'll say language.tpl.js. Great. Now after you include this template file, we will need to come back and do a little change. So let's come back to script.js. Now obviously, the data is fine and so are our two registered helpers. Now notice here, for this little file of template that we have, we are not using the registered helper anymore. In fact, we can go ahead and delete them. So I'll just include them in terms of comments so that you can refer to the source files later on. And lastly, we will come right at the bottom here. So the template is part of language.template. This is not required anymore because we do not have any script tags, and then we have HTML. So we are not also compiling anything. Instead, what we are doing is we are referring to the templates and the template in our case is called language.tpl. And that's it. Why don't we go ahead and look at it in the browser? If everything is fine, it will obviously look the same but notice here, we are referring to the JavaScript file which is the template file compiled right for us. And in this case, obviously, no extra delay time is happening because our templates are precompiled. So next time, you need certain helper methods or even if you need to create some helper methods on your own. And even save some processing time by having a precompiled template to consider Handlebars as your template.