Joe Karlsson
progress. tech. cats. coffee. art. food. photog. mpls.
Templating with
I mustache, What is handlebars?
It is a logicless Templating Language
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
Keep the view, view
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
Shave yourself the trouble
Build templates, do less, be awesome
Javascript Template Literals
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
Template HTML Escaping
// 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);Partials
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
Referencing partials in a template
//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>Views file structure
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.hbsWith this you can modularize all of your components for your markup
The structure is more specific and readable
Helpers
Handlebars has a few built-in helpers that allow us to do some cool things in our HTML without repeating ourselves
Iterators
{{#each}}
// 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)Conditionals
{{#if}}
// 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)Resources
http://handlebarsjs.com/
https://github.com/ericf/express-handlebars
Templating with Handlebars.js
By Joe Karlsson
