View Creation: Handlebars - akumina/AkuminaTraining GitHub Wiki

Akumina Foundation

When we create views within the Akumina Framework, we need to leverage Handlebars to incorporate tokens that are accessible to our Widget Definitions. Within the Akumina Framework, only the handlebars icons need be concerned. We automatically compile the template within the Akumina Widget Framework. Below are common use cases for Handlebars within Akumina Widget Templates.

An embedded Handlebars expression simply uses {{ content, followed by a }}. In the example below we use Handlebars to display the Title property of data passed to the view by an Akumina Widget.

<div class="myClass">
	<h1>{{Title}}</h1>
</div>

Handlebars expression can also be used to incorporate logic into a view. An if-else statement follows the pattern below

{{#if boolean property from widget }} if block {{else}} else block {{/if}}

In the following example, we read the HasTitle property from the widget data and display the value of the Title property only if HasTitle is true.

<div class="myClass">
	{{#if HasTitle}}
	<h1>{{Title}}</h1>
	{{else}}
	<h3>No Title</h3>
	{{/if}}
</div>

Handlebars expressions can loop through an array passed to the view within the Widget data. A loop follows the pattern below

{{#Array Object Name}} looped block {{/Array Object Name}}

In the following example, we loop through the array object, Items, passed to us from the Widget Data. Within each item we display the value of the item's Title property.

<div class="myClass">
	{{#Items}}
	<div class="myItem">
		<h1>{{Title}}</h1>
	</div>
	{{/Items}}
</div>

Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.

In the example below we use Handlebars to display the Title property of data passed to the view by an Akumina Widget, without escaping HTML values.

<div class="myClass">
	<h1>{{{Title}}}</h1>
</div>