loading

Handlebars Partials| Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • Why partials are important
  • How to construct partials
  • Examples of multiple partials in use

Partials

There are times where you have a handlebars template that you want to be able to use in many other handlebars templates, but don’t want to have it copied all over the place. In order to have only one copy that gets reused, handlebars has the concept of ‘partials’. These are indicated using a > within the handlebars expression, ex. {{> partial_template}}

Input Data

{
	"title": "My Partial Template",
	"firstName": "Bryan",
	"lastName": "Landen"
}

Templates

main_template.hbs

<h1>{{title}}</h1> 
<p>
	{{> some_partial_template}}
</p>

some_partial_template.hbs

Hello {{firstName}}! It's great to meet you.

Result

<h1>My Partial Template</h1>
<p>
	Hello Bryan! It's great to meet you.
</p>

Partial Block Expressions

In addition to being able to reuse common templates, there’s also the ability to pass data into the partial that can be rendered inside of it.

Input Data

{
	"title": "My Super Awesome Answers Page",
	"firstName": "Bryan",
	"lastName": "Landen",
}

Templates

body_of_page.hbs

{{#> layout }}
	<h1>Hitchhiker Profile</h1>
	<p>Welcome to the profile page for {{firstName}} {{lastName}}!</p>
{{/layout}}

layout.hbs

<html>
	<head>
		<title>{{title}}</title>
		<script src="http://www.yextcdn.com/answers/v1.1.0/answers.min.js" />
	</head>
	<body>
		{{! The page header }}
		{{> header}}
		{{! The main content of the page }}
		{{> @partial-block}}
		{{! The page footer }}
		{{> footer}}
	</body>
</html>

header.hbs

<div id="header">Some header stuff</div>

footer.hbs

<div id="footer">
	&copy; Yext, LLC. 2020. All rights reserved.&nbsp;|&nbsp;
	<a href="/about.html">About Us</a>&nbsp;|&nbsp;
	<a href="/privacy.html">Privacy Policy</a>
</div>

Result

<html>
	<head>
		<title>{{title}}</title>
		<script src="http://www.yextcdn.com/answers/v1.1.0/answers.min.js" />
	</head>
	<body>
		{{! The page header }}
		<div id="header">Some header stuff</div>
		{{! The main content of the page }}
		<h1>Hitchhiker Profile</h1>
		<p>Welcome to the profile page for {{firstName}} {{lastName}}!</p>
		{{! The page footer }}
		<div id="footer">
			&copy; Yext, LLC. 2020. All rights reserved.&nbsp;|&nbsp;
			<a href="/about.html">About Us</a>&nbsp;|&nbsp;
<a href="/privacy.html">Privacy Policy</a>
		</div>
	</body>
</html>

Notice how the partial calls two other partials - header and footer - and has an expression {{> @partial-block}}. That expression is replaced with the content in the partial block expression ({{>layout}}...{{/layout}}). In this case, it is replaced with:

	<h1>Hitchhiker Profile</h1>
	<p>Welcome to profile page for {{firstName}} {{lastName}}!</p>
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 3

    How do you indicate a partial?

    Error Success Question 2 of 3

    Are you able to pass data into a partial?

    Error Success Question 3 of 3

    Select some good use cases for using a partial template. (Select all that apply)

    Soon you'll be your brand's hero! 🎓

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading