- 00:00:01 hello everyone welcome back in the last
- 00:00:04 video we had a look at Jade the
- 00:00:07 templating engine Jade and we kind of
- 00:00:10 played around a little bit with express
- 00:00:12 so far and I thought well it might be
- 00:00:15 the best idea to just show you an
- 00:00:17 alternative to shade right now as Jade
- 00:00:20 is well you have to kind of like it I'm
- 00:00:23 not the biggest fan of completing
- 00:00:26 engines like Jade with white spaces
- 00:00:29 controlling the flow in the structure of
- 00:00:31 the document I'm more a fan of classic
- 00:00:34 HTML and then you just insert some
- 00:00:37 template expressions to manipulate that
- 00:00:41 but that's just my preference you may
- 00:00:43 choose whatever you like therefore
- 00:00:45 however in this video I will show you
- 00:00:48 how we can replace Jade with another
- 00:00:51 templating engine handlebars and I will
- 00:00:54 show you how to well use handlebars
- 00:00:57 let's start don't just start by copying
- 00:01:01 my old folder here and we name it to
- 00:01:06 handle ours that's just as I said in
- 00:01:09 earlier video I have this file structure
- 00:01:13 for my repository where you can find all
- 00:01:15 the code now that I copied it I will
- 00:01:19 just appoint by terminal and the first
- 00:01:21 thing is I will uninstall Jade I don't
- 00:01:23 have to do that I could let let live
- 00:01:26 there but I'm not going to use it so on
- 00:01:28 well I will just get rid of it I will
- 00:01:31 type NPM uninstall shade and I will
- 00:01:34 provide the – – save tag to also remove
- 00:01:39 it from the dependencies in my package
- 00:01:41 to chasten
- 00:01:47 and yeah it always helps to be in the
- 00:01:52 right folder so let me just repeat it
- 00:01:54 there so now if we open the package of
- 00:01:57 chase' file you see there is no more
- 00:01:59 shade in the dependencies area next
- 00:02:02 things I will install handlebars and I
- 00:02:05 will install Express handlebars which
- 00:02:08 again with the save tag to add the
- 00:02:10 dependencies which is well handlebars
- 00:02:13 optimized or porridge it to Butte work
- 00:02:18 really great in a node where it's
- 00:02:20 specially above Express like the name
- 00:02:22 implies so now you can see we get this
- 00:02:25 Express handlebars dependency here and
- 00:02:28 it's also installed here in our node
- 00:02:31 modules if we have a look at here
- 00:02:34 Express handlebars okay so now with that
- 00:02:38 set up I have to adjust my few engine
- 00:02:42 here because I'm no longer using Jade to
- 00:02:46 do this I'll add a new step here first
- 00:02:50 thing is I will require Express
- 00:02:53 handlebars which we'll just name is HBS
- 00:02:56 require Express handlebars there it is
- 00:03:01 and after doing this I will add a new
- 00:03:06 entry here where I kind of create a new
- 00:03:09 engine for our Express app let it know
- 00:03:11 that I have a new engine available and I
- 00:03:15 will give this engine an internal name
- 00:03:18 of HBS and I will use this well this
- 00:03:26 package just required queue while create
- 00:03:29 this engine basically and here I want to
- 00:03:32 give to some options some configuration
- 00:03:34 the first is the Xtreme property here
- 00:03:39 where a chest will basically specify the
- 00:03:42 extension of the files so that Express
- 00:03:46 is able to recognize which files are
- 00:03:48 kind of written in handlebars or should
- 00:03:51 be run through the template and I want
- 00:03:53 to have dot HBS's extent ads as an
- 00:03:56 extension and therefore I add HBS here
- 00:03:59 next thing is
- 00:04:00 I will set my default layout folder my
- 00:04:06 default layout name your – layout so I
- 00:04:11 will show this in a second handlebars
- 00:04:14 also offers us the possibility to define
- 00:04:16 layouts where we have a specific block
- 00:04:19 where then the content of the individual
- 00:04:21 page will be kind of injected and I'm
- 00:04:24 telling handlebars here that default
- 00:04:26 layer to be used is the layout layout
- 00:04:29 file so like we have layout shade we
- 00:04:33 will have a layout HPS and this layout
- 00:04:36 file should be the default they are used
- 00:04:38 if I don't overwrite this that is
- 00:04:40 basically what I'm saying here now with
- 00:04:43 that out of the way what I do here is I
- 00:04:47 will set my view engine to HBS because
- 00:04:52 well I set it up here as an engine I
- 00:04:54 registered it as an engine here in my
- 00:04:57 Express app and I want to add one more
- 00:05:01 parameter here this is the layout
- 00:05:04 directory where layouts will be found
- 00:05:07 and this should be your name which
- 00:05:09 always points to the well root directory
- 00:05:13 of our know chairs up here and then
- 00:05:17 we'll find it in views folder slash
- 00:05:22 views and then I will create a subfolder
- 00:05:25 layouts where all my layout should
- 00:05:27 should be now with that setup I will
- 00:05:31 create a folder in my few folder here so
- 00:05:33 layouts is of course purely optional you
- 00:05:38 could also just point to the fuse for
- 00:05:41 itself and not to the layouts subfolder
- 00:05:44 next thing is I will move my lamps to
- 00:05:50 shade file into there and I will well
- 00:05:53 change the the name or the extension of
- 00:05:56 this file to HPS and of course I also
- 00:06:00 can't use this so what I will do here is
- 00:06:03 I will set up a new well html5 skeleton
- 00:06:08 which I want to use in here I will
- 00:06:12 output the title
- 00:06:14 in a second and between the body tags I
- 00:06:17 want to have the part where the
- 00:06:18 individual pages can well inject or put
- 00:06:22 their content into like ones with Jade
- 00:06:26 we did with this block content statement
- 00:06:29 here I also will add well the style
- 00:06:33 sheet which is still in the style sheets
- 00:06:37 folder style sheet style CSS so how do
- 00:06:43 we do this how do I insert a title here
- 00:06:45 and set up the section for the
- 00:06:48 individual page parts in my body here
- 00:06:51 let's begin with the title I can just
- 00:06:54 output variables or data pass to the
- 00:06:59 template by using double curly braces
- 00:07:03 that's by the way where the name comes
- 00:07:05 from these handlebars here and then I
- 00:07:08 just specify the name of the variable I
- 00:07:11 want to output here title because
- 00:07:13 remember in my routes file here I'm
- 00:07:16 setting this title variable here and
- 00:07:19 well this is just what it will output
- 00:07:21 here next thing is the part worthy
- 00:07:25 detail part where the block content
- 00:07:27 where the individual pages can inject
- 00:07:31 their content is set up by using free
- 00:07:35 Kali braces to escape HTML or to not
- 00:07:40 escape HTML to be precise because using
- 00:07:43 double curly braces make sure that only
- 00:07:46 text is output and if I would have HTML
- 00:07:50 tags in this variable it would just
- 00:07:52 render them as text but using free kolja
- 00:07:56 braces says no no render the HTML and we
- 00:07:59 definitely want that to be the case in
- 00:08:01 our content here which comes from our
- 00:08:03 individual pages which will of course
- 00:08:05 not only contain plain text but HTML
- 00:08:07 themselves so I have free quality braces
- 00:08:10 here and then we name this body because
- 00:08:14 body is the reserved name so to say the
- 00:08:18 reserved hook handlebars will look for
- 00:08:22 and which will be a kind of overwritten
- 00:08:25 or replaced with the
- 00:08:27 of the pages so this name is not
- 00:08:29 optional or not freely chosen it has to
- 00:08:33 be body here because we set this file up
- 00:08:36 as our main layout if you remember the
- 00:08:39 app touch as file and therefore
- 00:08:42 handlebars will then look for this body
- 00:08:45 part here to insert the actual content
- 00:08:49 of the individual pages so I hope this
- 00:08:52 is clear how this works
- 00:08:54 so this is how we set up our layout now
- 00:08:58 let's change our index dot change change
- 00:09:01 file to index HPS here again we can't
- 00:09:05 use this but we of course want user
- 00:09:09 layout we don't have to extend it
- 00:09:11 because if you remember in the appliques
- 00:09:13 file we set a default layout of this
- 00:09:16 layout file now we could overwrite us
- 00:09:18 when rendering our page and we will see
- 00:09:20 this in future lectures but as we have
- 00:09:23 this default layout I don't need to
- 00:09:26 extend anything I also need don't need
- 00:09:29 this blog content because as I said
- 00:09:31 handlebars will always take the content
- 00:09:33 in this file and just insert it where it
- 00:09:36 finds this body part this body hook in
- 00:09:41 the layout so all I have here is an h1
- 00:09:43 title which again should be the title
- 00:09:47 and then let's say you to create the
- 00:09:52 same view as the last lecture I will
- 00:09:55 have a paragraph which says welcome and
- 00:09:59 welcome to you and then again Thailand
- 00:10:03 you can already see good thing is
- 00:10:06 compared to Jade well it's normal HTML
- 00:10:09 again and we always have this double
- 00:10:12 curly braces syntax it doesn't matter if
- 00:10:14 it's the only content between two HTML
- 00:10:17 tags or if it's nested in normal text so
- 00:10:21 I save this and now let's let's run the
- 00:10:26 app shall we so I run my server here and
- 00:10:29 I reload my page and as you can see this
- 00:10:31 works and this is now rendered through
- 00:10:34 handlebars not Jade so last thing is I
- 00:10:38 will
- 00:10:39 also rewrite my error file here again
- 00:10:43 replace the file ending get rid of this
- 00:10:46 and let's justwell output the error
- 00:10:49 message here like that and I will get
- 00:10:52 rid of the other stuff I had here
- 00:10:54 because yeah it's only that we have a
- 00:10:57 valid file which can be used so this is
- 00:11:00 general how we set up how or so how we
- 00:11:02 use it overuse layouts now let's dive a
- 00:11:05 little bit deeper into that templating
- 00:11:07 engine and the MX file here we currently
- 00:11:15 have well days now I want in my routes
- 00:11:20 file I'll get rid of these routes
- 00:11:22 because currently they don't lead
- 00:11:23 anywhere I want extra of my conditional
- 00:11:27 I will use this and I will pass an array
- 00:11:31 your queue which should just hold well
- 00:11:34 free numbers now in my index file again
- 00:11:38 let's first say I want to check if a
- 00:11:41 certain condition is met and as you saw
- 00:11:44 I'm passing this condition variable
- 00:11:46 which to us just as false how can I do
- 00:11:49 this handlebar handlebars has this
- 00:11:53 concept called helpers we can write our
- 00:11:55 own helper functions which basically
- 00:12:00 transform code or which well add a
- 00:12:03 certain functionality to the templating
- 00:12:05 engine we can use it also has some
- 00:12:07 built-in helpers like well things you
- 00:12:10 often use like if statements or each
- 00:12:13 loops so what we need here let's start
- 00:12:17 with the if statement this helper will
- 00:12:21 be a block expression because it will
- 00:12:23 have multiple lines and normal or non
- 00:12:27 block expression is well something
- 00:12:29 likely like the style thing here it's
- 00:12:31 only one line here we can't have
- 00:12:34 multiple lines of codes this would throw
- 00:12:37 an error now in contrast to that when
- 00:12:41 you see if we certainly need certain
- 00:12:44 well or multiple numbers because we
- 00:12:46 would have something like if condition
- 00:12:50 and then we want to have something here
- 00:12:53 if this condition is met then we might
- 00:12:55 have else and then we will probably have
- 00:12:59 something like and if so this would be
- 00:13:04 kind of the syntax we would expect right
- 00:13:06 let's see how this actually looks in
- 00:13:08 handlebars and why this is the case as I
- 00:13:11 said we no longer have this single line
- 00:13:15 expression but it's kind of a block
- 00:13:17 because we're wrapping some content with
- 00:13:20 this overall template expression here
- 00:13:23 which is not independent or these
- 00:13:25 individual lines are not independent of
- 00:13:27 each other but they kind of work
- 00:13:30 together sit roulette handlebars know
- 00:13:33 that I have to specify that we're now
- 00:13:36 writing some code over multiple lines or
- 00:13:38 that we have this
- 00:13:39 yeah block here I do this by adding a
- 00:13:42 hash sign right after these double curly
- 00:13:45 braces and that is just half my my if
- 00:13:48 condition here but now I get my ID or it
- 00:13:53 tells you if block not closed
- 00:13:55 well because it's not and if but instead
- 00:13:58 we use a slash like a close and normal
- 00:14:02 HTML tag and my ID automatically
- 00:14:05 autocomplete at that it now recognizes
- 00:14:08 this is a valid block in handlebars we
- 00:14:12 close it with double curly braces slash
- 00:14:14 again like an HTML tag just with double
- 00:14:18 curly braces and we open it with this
- 00:14:21 hash signs and now handlebars knows this
- 00:14:23 here is one block working together now
- 00:14:28 the outside one in the middle is fine
- 00:14:29 this is actually written like this
- 00:14:31 because again it's now in the middle of
- 00:14:33 this block and therefore this works so
- 00:14:38 now I can say if condition is met I can
- 00:14:40 write like condition is matte or
- 00:14:44 condition not matte something like this
- 00:14:47 let me reload and you can see condition
- 00:14:49 not met because yeah we were passing
- 00:14:51 false here if I change this to true this
- 00:14:55 condition we should see that the
- 00:14:58 condition is matte
- 00:15:00 oops I need to of course restart my
- 00:15:03 server now conditioners Matt so now
- 00:15:07 let's output this area with a each loop
- 00:15:11 again in my index file ie Shoop is a
- 00:15:14 block – right because again we would
- 00:15:17 have like opening of the each loop that
- 00:15:20 some code or some HTML well content
- 00:15:24 between the opening and ending statement
- 00:15:27 and then well the ending statement so to
- 00:15:30 do this I will again open up my block
- 00:15:32 statement with double curly braces and
- 00:15:34 hash and then I will have my each
- 00:15:38 keyword here and like F and s and so on
- 00:15:43 this is of course a reserved keyword
- 00:15:45 here see how each and I want to well
- 00:15:48 loop through any array and then I will
- 00:15:53 just oops
- 00:15:54 I will just close this here close the
- 00:16:00 each block so now this is working again
- 00:16:05 but it's one have one curly brace too
- 00:16:08 much so now this should work and now how
- 00:16:11 do I put the value and currently looping
- 00:16:13 over I can use or I should use this
- 00:16:17 which again as a reserved word here by
- 00:16:20 handlebars – in this block statement
- 00:16:23 output in this H statement output
- 00:16:26 current value of well of the current
- 00:16:29 iteration so let me save it and reload
- 00:16:32 and I can see one two three here if I
- 00:16:36 want to rename this or maybe I'll also
- 00:16:37 want to output the current key I can you
- 00:16:41 as and then I'm from a pipe sign two
- 00:16:45 pipe signs and between these pipe signs
- 00:16:48 I would have value and the key so now I
- 00:16:52 can say value and if we load this you
- 00:16:58 see nothing changes this still works and
- 00:17:01 I could also say well key and unlike
- 00:17:06 let's say coolant and the value and now
- 00:17:09 you will see okay the first element
- 00:17:12 index zero is one second element is two
- 00:17:14 and third element is free so this is how
- 00:17:18 you can use the each expression here ah
- 00:17:22 well these are the very basics about
- 00:17:24 handlebars as I said you can write your
- 00:17:26 own helpers we can include partials and
- 00:17:30 so on and these are all things you can
- 00:17:33 very easily look up if you want to know
- 00:17:35 them right now otherwise we'll use
- 00:17:39 handlebars in the future widgets and you
- 00:17:41 will never see how to do things like
- 00:17:44 this very looking forward to seeing in
- 00:17:47 the next videos bye