Block Expressions | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

How to construct if expressions
How to use with expressions
How to list items using each expressions

Block expressions allow you to invoke a section of your template with a different context than the current. These block expressions are identified by a # preceding the helper name and require a matching closing mustache, /, of the same name. It is called a ‘block’ because it allows you to put Handlebars templating between the open and close mustache - a template ‘block’.

For example:

{{#if data.someValue  > 10}}
  {{data.someValue}} is greater than 10
{{/if}}

The block starts with {{#if data.someValue > 10}} and closes with {{/if}}, and {{data.someValue}} is greater than 10 is inside the block.

#if and #else

You can use the conditional block expression #if when you want to show something when a particular condition is met and #else inside of the #if block to do something else when the condition is not met.

For example, let’s say you want to show two conditional strings on a page:

Whether a professional is accepting new clients
The professional’s favorite color

If we have these defined in our input data, we can use if expressions to change the behavior of the HTML output based off the values of these fields.

Input Data

{
	"firstName": "Bryan",
	"lastName": "Landen",
	"isAcceptingNewClients": true,
	"favorites": {
		"food": "Spaghetti"
	}
}

Template

<h1>{{firstName}}'s Favorites</h1>
<table>
	<tr>
		<td>Accepting New Clients?</td>
		<td>
			{{#if isAcceptingNewClients}}
				Yes
			{{#else}}
				No
			{{/if}}
		</td>
	</tr>
	<tr>
		<td>Food</td>
		<td>{{favorites.food}}</td>
	</tr>
	<tr>
		<td>Color</td>
		<td>
			{{#if favorites.color}}
				{{favorites.color}}
			{{#else}}
				{firstName} doesn't have a favorite color
			{{/if}}
		</td>
	</tr>
</table>

Result

<h1>Bryan's Favorites</h1>
<table>
	<tr>
		<td>Accepting New Clients?</td>
		<td>Yes</td>
	</tr>
	<tr>
		<td>Food</td>
		<td>Spaghetti</td>
	</tr>
	<tr>
		<td>Color</td>
		<td>Bryan doesn't have a favorite color</td>
	</tr>
</table>

Note

Notice that in addition to the standard true and false values, the absence of a value in the input data will evaluate to false in a conditional ({{#if favorites.color}}).

#with

You can modify your evaluation context by using the #with block expression.

In this example, we use #with to eliminate specifying favorites in every expression:

Input Data

{
	"firstName": "Bryan",
	"lastName": "Landen",
	"favorites": {
		"food": "Spaghetti",
		"color": "Purple"
	}
}

Template

<h1>{{firstName}}'s Favorites</h1>
{{#with favorites}}
<table>
	<tr>
		<td>Food</td>
		<td>{{food}}</td>
	</tr>
	<tr>
		<td>Color</td>
		<td>{{color}}</td>
	</tr>
</table>
{{/with}}

Result

<h1>Bryan's Favorites</h1>
<table>
	<tr>
		<td>Food</td>
		<td>Spaghetti</td>
	</tr>
	<tr>
		<td>Color</td>
		<td>Purple</td>
	</tr>
</table>

#each

You can also use the #each block expression to output every entry in a list of values.

Input Data

{
	"firstName": "Bryan",
	"lastName": "Landen",
	"skills": [
		"HTML",
		"JavaScript",
		"Natural Language Processing",
		"Search Engine Optimization"
	]
}

Template

<h1>{{firstName}}'s Skills</h1>
<ul>
	{{#each skills}}
	<li>
		{{this}}
	</li>
	{{/each}}
</ul>

Result

<h1>{{firstName}}'s Skills</h1>
<ul>
	<li>
		HTML
	</li>
	<li>
		JavaScript
	</li>
	<li>
		Natural Language Processing
	</li>
	<li>
		Search Engine Optimization
	</li>
</ul>

You’ll notice that we have an expression that says this inside of it - that’s how you refer to the current value in the list you are operating on. If the value is complex - not just a simple value - you can use dot-notation to access the values inside of it.

Input Data

{
	"firstName": "Bryan",
	"lastName": "Landen",
	"favorites": {
		"books": [
			{
				"title": "The Hitchhiker's Guide to the Galaxy",
				"author": "Douglas Adams"
			},
			{
				"title": "Instant Handlebars.js",
				"author": "Gabriel Manricks"
			},
			{
				"title": "Last Train to Texas: My Railroad Odyssey",
				"author": "Fred W. Frailey"
			},
		]
	}		
}

Template

<h1>{{firstName}}'s Favorite Books</h1>
{#with favorites}
<ul>
	{{#each books}}
	<li>
		"{{this.title}}" by {{this.author}}
	</li>
	{{/each}}
</ul>
{{/with}}

Result

<h1>Bryan's Favorite Books</h1>
<ul>
	<li>
		"The Hitchhiker's Guide to the Galaxy" by Douglas Adams
	</li>
	<li>
		"Instant Handlebars.js" by Gabriel Manricks
	</li>
	<li>
		"Last Train to Texas: My Railroad Odyssey" by Fred W. Frailey
	</li>
</ul>

unit Quiz

+20 points

Daily Quiz Streak: 0

Quiz Accuracy Streak: 0

Question 1 of 3

When would you typically use an if statement? (Select all that apply)

To vary the HTML returned based off the value of a field

To check whether or not a field has data before using its value

To set the evaluation context of your expression

Question 2 of 3

How can you check if a field exists in your input?

You cannot do this - if you use a field that doesn't exist in your input data, you will get an error

The absence of a value evaluates to false, so you can indicate {{#if field}} to check if that field exists.

Question 3 of 3

What does 'this' refer to?

The current object you're operating on

An ambiguous identifier that returns the most relevant object for the expression

Way to go, you passed! 🏁

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.

1^st attempt

0 incorrect

Feedback

<% elem.innerText %>