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
andeach
helpers when creating templates.
- Fork and clone this repository.
- Install dependencies with
npm install
.
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/)
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.
var 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.
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 seperate file is accessed.
- Be able to explain in plain english what is happening.
- What happens if you move the line that defines
bookListingTemplate
? - Experiment with
console.log()
anddebugger
to aid in your understanding.
Make sure to note any questions you come acorss and we'll go over them as a class.
Continuing with what was learned in the previous lab let's discuss what you discovered trying to answer the questions.
Let's look through the documentation and see if there is anyway we can improve this code.
Handlebars Helpers Documentation
Using the documentation discussed refactor my code.
Rules:
- NO FOR LOOPS
- You should try to do as much as you can utilizing Handlebars
You may have noticed a few things about my demo API (aside from lack of
cretivity). Along with being complete insecure and allowing any type of request,
it also has a /users
path. Please do the following:
- Create two buttons somewhere on the page.
- One button should be a "users" button, the other should be a "books" button.
- When each button is clicked the button should clear the content div and replace the book/user listing with the other. -Do this making use of all the handlebars features we discussed and at least one partial.
- Make one button and have it alternate between users and books when clicked.
- Using the examples in
scripts/helpers
make your own custom helper. - Make use of
{{this}}
helper.
Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.