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

const personObj = {
    name: "bob",
    age: "20"
}

const string = `<h1>${personObj.name}</h1>
              <span>Age: ${personObj.age}</span>`

const 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
const 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.hbs

With 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

// 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
const commentsCollection = {
  comments: [
    {title: "Hello", text: "This is dog"},
    {title: "I Love Pie", text: "I cannot lie"}}
  ]
}

res.render('comments', commentsCollection)

Conditionals

// 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
const data = {
  showContent: true,
  content: "Show me the money!"
}

res.render('home', data)

Resources

http://handlebarsjs.com/

https://github.com/ericf/express-handlebars