loading

Block Expressions| 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:

  1. Whether a professional is accepting new clients
  2. 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>
light bulb
Tip
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 Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 3

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

    Error Success Question 2 of 3

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

    Error Success Question 3 of 3

    What does 'this' refer to?

    You're out of this world! 🌎

    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