Handlebars

Prerequisites

• jQuery Dom
• HTML- CSS

Objectives

By the end of this, developers should be able to:

• Create Handlebars templates to render JSON data from an API.
• Read Handlebars templates for understanding.
• Create nested handlebars paths.
• Create handlebars partials.
• Utilize if and each helpers when creating templates.

Preparation

1. Fork and clone this repository.
2. Install dependencies with npm install.

What is Handlebars

Just a templating engine for JS.

But a little more:

As noted in the introduction: Handlebars.js is a compiler built with JavaScript that takes any HTML and Handlebars expression and compiles them to a JavaScript function. This derived JavaScript function then takes one parameter, an object—your data—and it returns an HTML string with the object properties’ values inserted (interpolated) into the HTML. So, you end up with a string (HTML) that has the values from the object properties inserted in the relevant places, and you insert the string on a page.

Javascript is Sexy: Handlebars

Handlebars Docs: (http://handlebarsjs.com/)

Before handlebars

Suppose that we just queried our back-end, a song API, and received some data in the form of a JSON string.

[{"title":"Smells Like Teen Spirit","album":"Nevermind","artist":"Nirvana"},
{"title":"San Diego Serenade","album":"Heart of Saturday Night","artist":"Tom Waits"},
{"title":"Johnny B. Goode","album":"Chuck Berry Is on Top","artist":"Chuck Berry"},
{"title":"Come Together","album":"Abbey Road","artist":"The Beatles"},
{"title":"Hey Jude","album":"Revolution (B-side)","artist":"The Beatles"},
{"title":"Get Behind the Mule","album":"Mule Variations","artist":"Tom Waits"}]

Our front-end app might then parse that JSON and give us an array of JavaScript objects, which we can then iterate through.

data.forEach(function(song){
  // Do some action.
});

If we wanted to produce an <li> for each of these songs, and add them to a <ul> with the id songs, we could do it like this:

data.forEach(function(song){
  $("#songs").append("<li><h4>" + song.title + "</h4> By " + song.artist + ", from the album '<em>" + song.album + "</em>'</li>");
});

Alternatively, we could specify some string to represent all of the HTML we want to add, and then add it to the <ul> in one fell swoop.

let newHTML = "";
data.forEach(function(song){
  newHTML += "<li><h4>" + song.title + "</h4> By " + song.artist + ", from the album '<em>" + song.album + "</em>'</li>";
});
$("#songs").html(newHTML);

This approach has some advantages over the first - for instance, we don't need to worry about clearing the contents of $("#songs") each time.

Lab: Hands on with Handlebars

Handlebars and front end templating will make a whole lot more sense once you have a chance to look at it. In your squads discuss and consider the following:

• What is happening in the scripts/index.js file?
• How many times is book-listing.handlebars run?
• Draw the order in which each separate file is accessed.
• Be able to explain in plain english what is happening.
• What happens if you move the line that defines showBooksTemplate?
• Uncomment the line {{> partial}} from book-listing.handlebars, what does it do?
• Experiment with console.log() and debugger to aid in your understanding.

Make sure to note any questions you come acorss and we'll go over them as a class.

Discussion: What was discovered

Continuing with what was learned in the previous lab let's discuss what you discovered trying to answer the questions.

What do you think would happen if I tried to add an event handler to something contained in my template before it was rendered?

Why do you think we do not commonly use a static value for an HTML ID attribute in templates?

Let's look through the documentation and see if there is anyway we can improve this code.

Handlebars Helpers Documentation

Lab: Event Delegation

Using documentation and your squad, work on getting up the page

• Refactor the book-listing.handlebars template so that the each book's information is displayed within an ul with a data-id attribute.
• Add a button called Remove as the last li for each book.
• When a user clicks on the Remove button for any specific book, it should hide the book's information
• Add a prompt that checks if the user is sure they want to remove the book

Challenge: API

The Remove button only removes the book from the page, not from the database.

• Make a Delete request to the API when the Remove button is clicked and upon success it should remove the book from the page.

Additional Resources

• Handlebars Docs
• Handlebars in Ten Minutes
• Javascript is Sexy: Handlebars

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.