Advanced Templating

Objectives

  1. Explain how to use Handlebars templates

  2. Practice writing a template using Handlebars

  3. Describe Handlebars' built-in helpers (if and each)

  4. Write a custom Handlebars helper

Introduction

Templates are a powerful way to dynamically create HTML content without having to hand-build and concatenate strings of HTML and data values within your JavaScript code.

A good template engine will allow you to create HTML templates and insert placeholders for dynamic data in the least obtrusive way possible, separating the definition of the template from the consumption of it so that our code stays readable, maintainable, and well-organized.

Today we're going to work with Handlebars, which is a powerful template engine. We'll see how to render simple templates and also learn how Handlebars makes tasks like working with collections of data easier.

Basic Handlebars

Let's jump right in and create a Handlebars template and render it to the page. Similar to some other template engines, we can define a Handlebars template inside of a

Clone: https://github.com/learn-co-curriculum/js-templates-advanced-templating-readme

Last updated