Handlebars is a templating language that makes it possible for you to change the content of a HTML page when it is loaded. Handlebars may be used for conditional formatting, for inserting data into a page or iterating data collections.

A handlebar expression starts with {{ and ends with }}. The content between those curly brackets is parsed as handlebars expressions.

When the handlebars template is parsed a context with data is attached to the template. This context is different in Aquro App Studio depending on where the handlebar template is executed.

When executed from a page template the handlebar context is the same as the Page.State object. Read more about the Page object here and when the template is executed from a component the context contains of the different Properties on the component.

Example 1:
If the component contains of two properties called Subject and Text the context object will look like this:

{
   ID : "ComponentID",
   Subject : "Value of subject",
   Text :  "Value of text"
}

The most basic handlebar expression is to output the value from a object in the context. This is simply done by writing the name of the property in the context between the curly brackets.

If you write

{{Subject}}

the output will be: Value of the object

If the context contains a data item property you can access that items properties by using nestled paths.

Example 2:
The component contains two properties called Title and Person where the Person property is a data item. The context could then look like:

{
   ID : "ComponentID",
   Title : "Value title",
   Person :  {
      Id : "PersonID",
      FirstName : "John",
      LastName : "Doe"
   }
}

To output the full name of the person on the page, use nestled path as shown here:

{{Person.FirstName}} {{Person.LastName}}

The output will be John Doe

Handlebars also supports iteration of data. This is when you like to loop through a collection of data.

Example 3:
The component contains two properties called Title and Persons where the Persons property is a collection of Person items. The context could look like this:

{
   ID : "ComponentID",
   Title : "All persons",
   Persons : [
      {
         Id : "PersonID",
         FirstName : "John",
         LastName : "Doe"
       },
       {
         Id : "PersonID2",
         FirstName : "Jane",
         LastName : "Doe"
       }
   ]
}

To first output the Title property then list the first names of the both persons you need to use iterations.

{{Title}}

{{#each Persons}}
   {{FirstName}}

{{/each}}

The output would then be:
All persons
John
Jane

As you might see in this example there some new things here.

First there are the {{#each Persons}} expression. This expression means that we are using a helper function named each and sends the property Persons as the first argument to this functions.

Helper functions is very common in handlebars to be able to format your page by conditions or as in this case with iterations.

A helper function is a built in JavaScript function that takes arguments and a sub template (sometimes two sub templates).

The syntax for calling a helper function is basically:

{{#helper argument1 argument2 argument3}}
   sub template
{{/helper}}

As you see the call to the helper function starts with a {{#helper arguments}} line where helper is the name of the handlebars helper and a list of arguments.

Then we have a sub template that is sent to the helper to do something with.

And the call to the helper function always ends with the {{/helper}} syntax (where helper is the name of the helper).

In the above example with the each helper the first argument is the list of items to iterate. The each function is made to loop through all items supplied to the function and then parse the sub template with the current item as the context for the subtemplate. Therefore we can access the current persons FirstName property by just writing {{FirstName}} in the template.

The arguments sent to the helper function should be name of a property in the context or a literal value written between quotes.

By using Handlebars expressions to output data and to call handlebars helpers you may be able to design advanced templates that will render the data you like without working with javascript manipulations in your page.

Read this article for more information about the available handlebars helpers in Aquro App Studio.