We use templating languages to render html with the desired content and features.
It can help a lot with readability and organization of your front-end markup
Where jQuery and vanilla Javascript edit/add values to our HTML
Template languages helps with rendering the entire document using javascript before serving it to the user
This allows for cleaner code and helps us keep the view and the code separate
let personObj = {
name: "bob",
age: "20"
}
let string = `<h1>${personObj.name}</h1>
<span>Age: ${personObj}</span>`
let body = document.getElementByTagName('body');
body.innerHTML = string;
<body>
<h1>Bob</h1>
<span>Age: 20</span>
</body>
We used template literals to render HTML strings in Javascript to build our markup
This is very abstract and we can't really see whats happening in our markup
Outputs
// home.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{myTitle}}</title>
</head>
<body>
<h1>{{aboutMe.name}}</h1>
<span>Age: {{aboutMe.age}}</span>
</body>
</html>
// home.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Awesome Site</title>
</head>
<body>
<h1>Bob</h1>
<span>Age: 20</span>
</body>
</html>
With templates we can interpolate or express them within HTML markup. This lessens the abstraction of what's happening in our HTML
// data to inject to template to render
let homepageData = {
myTitle: "My Awesome Site",
aboutMe: {
name: "Bob",
age: 20
}
}
res.render('home', homepageData);
We can use partials to componentize our HTML similar with module patterns in Javascript
In handlebars we identify partials with the > operator in our expressions
//main.hbs
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
{{> header}}
<h1>The Body</h1>
</body>
</html>
//output main.html
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<div class="header">
<h1>The Header</h1>
</div>
<h1>The Body</h1>
</body>
</html>
// header.hbs
<div class="header">
<h1>The Header</h1>
</div>
Basic file structure for your template views usually has a partials and layouts directory to hold respective parts of your markup
|____views/
| |____index.hbs
| |____partials/
| |____header.hbs
| |____footer.hbs
| |____nav.hbs
| |____form.hbs
| |____layouts/
| |____app.hbs
Handlebars has a few built-in helpers that allow us to do some cool things in our HTML without repeating ourselves
// comments
<div class="comments">
{{#each comments}}
<div class="comment">
<h2>{{title}}</h2>
<p>{{text}}</p>
</div>
{{/each}}
</div>
<div class="comments">
<div class="comment">
<h2>Hello</h2>
<p>This is dog</p>
</div>
<div class="comment">
<h2>I Love Pie</h2>
<p>I cannot lie</p>
</div>
</div>
//data injected
let commentsCollection = {
comments: [
{title: "Hello", text: "This is dog"},
{title: "I Love Pie", text: "I cannot lie"}}
]
}
res.render('comments', commentsCollection)
// home template
{{#if showContent}}
<p>{{content}}</p>
{{else}}
<p>No Content Available</p>
{{/if}}
// if showContent is true
<p>Show me the money!</p>
// else...
<p>No Content Available</p>
//data injected
let data = {
showContent: true,
content: "Show me the money!"
}
res.render('home', data)
http://handlebarsjs.com/
https://github.com/ericf/express-handlebars