Frontend Templates With Handlebars.js

code is a walmart desk a keyboard a monitor and a lamp when toilet can encode information and knowledge gets dispersed to the one above yours when searching by hot at least some thought went into yours whereas the other person get a motel wise words to live by today i'm going to show you how to use handlebars which is a template engine and i know a few months ago i made a video about cheetahs which is a different template engine but the thing about cheetah is that it can only run on the back end so it's only useful for certain situations whereas handlebars can run both on the front end and on the back end assuming you're using node.js for the back end it means that you can generate your stuff on the fly on the front end if you want to or on the back end cheetah requires you to render your template to a file handlebars lets you put it straight out wherever you want do whatever i'm showing you how to use it let's get started remember when i used to say pop open your text editor or whatever you prefer to use to write html well pop open your text editor or whatever you prefer to use to write html i'm using litexcel and you can use whatever you want i don't care and make a new file let's make a doctype tag and then it's gonna close the tag for me because the plugins not smart i was trying to figure out how to make it not detect the exclamation mark so like it'll it won't fill it if it's an exclamation mark but i don't know i can work on it more but it wasn't working anyway i'm just creating you know the basic html thing the s code has a shortcut for this where you type html colon five and it just fills all this out just fills all this out for you and i'm thinking i could probably make a plugin that does that for light xl which would be really cool but no promises if you want to make it go ahead i might do it but alright so now first thing we want to do is link it i'm doing this on the front end but it's basically the same you just install it with npm if you're doing node.js link the script src equals and paste that js deliver link and i'll put this link in the description but make sure that this number here is replaced with the latest version because otherwise you'll be running on an outdated version if you're not watching this video when it comes out which chances are you're not i'm gonna just link another javascript file where i'm gonna put the javascript you could do it in line but i don't wanna all right now the fun part making a template so the cool thing about handlebars is that you can have your templates in line right in the html which is what i'm going to be doing or you can have them in a hps file so i'm going to do it in line so you just make a script tag but set the type attribute to text slash x dash handlebars template so i'm going to make an h1 tag and then when you pass variables to handlebars you pass them as an object so you can do title inside of double curly brackets and this refers to a key in the dictionary that we pass handlebars when we fill out the template so now i'm going to make an ol tag that stands for order list and i'm going to do in double curly brackets again hash each list and what this does is basically a for loop loops through them and then we can do li and if you just did this that would work but because i want to demonstrate that you can have objects like inside the object i'm going to do this dot name in double curly brackets and then at the end of the loop you just do slash each inside of double curly brackets and that's that and then i'm going to do p ha happy footer in double curly brackets and close that p tag so now we have our template and i'm just going to make a div id equals output where we're going to put the output of our template by the way if you want to put comments in your template you just do the double curly brackets again and then you do exclamation mark and now this is a comment cool so we've got our output div i'm just going to do one more thing which is make a button on click equals fill template obviously you probably wouldn't want to have this in your actual web page but this is just a demonstration so it doesn't matter now i'll make a new file handlebars tutorial.js so function fill template which is what i called it in the html so first i'm going to make the object that we're going to be passing to handlebars as our data so var data equals and then title y handlebars is cool then i'm going to do list and because i did here in the html this dot name rather than just this we're going to make each list item an object even though normally if you were just making a list of stuff you wouldn't do this and it's actually less efficient i'm just doing this for demonstration purposes you can generate stuff by the way in the notes for this video i have like better reasons but they're so long so okay and now just add the footer now if our template equals handlebars with a capital h this is the global object that handlebars gives you dot compile and here you pass it the text of the template so if you were not doing a template that's in line the way this one is if you had a file now would be the time to add a fetch request in and grab the text from that but since mine is right in the dom we can just do document dot query selector hash template oh wait did we give the script an id if your template is in line you need to give it an id so id equals template there we go then once we've got this you know this template to fill in the data all you got to do var filled equals template yes template becomes a function and just pass it the data and also it will take another thing if you want which is handlebars options and you can do like no escape colon true and what this does is it doesn't escape html so if i were to put like a b tag then no escape being true would allow this html to be inserted with no escape as false which is the default then it will get converted into text and this will not be bold it will literally just say be bold slash b so you know that's a useful thing to know and there's a whole bunch of other options too now we can do document dot query selector output dot inner html equals fields semicolon that's the whole thing so we can open it in the browser click fill template and it didn't work why didn't it work okay so the bug was very obvious i accidentally just passed it the entire element rather than just the inner html make sure you don't make that same mistake if you're fetching you probably don't even have that problem but maybe you accidentally passed it the entire response object rather than just the text anyway fill template and look how fast it filled it out why handlebars is cool you can generate stuff it works on both ends it weighs like 24 kilobytes which admittedly for a javascript library is a little on the heavy side but i mean it's not that bad haha templates go and this is a footer if i push it again nothing seems to happen but it is actually filling out the template again and remember what you had for breakfast on august 24 2016.

Channel: Cukmekerb's Coding Class

Views: 46,808

Keywords: handlebars, mustache, template, template engine, cheetah, nunjucks, handlebars template, handlebars.js, mustache.js, javascript, vanilla js, html, css, html5, css3, code, coding, nodejs, cukmekerb, programming, web dev, frontend, backend, learn to code, class

Id: NaUHlG-Q0vg

Length: 8min 16sec (496 seconds)

Published: Mon May 17 2021