Expressions
Expressions are the basic unit to render dynamic template through a simple and an expressive syntax.
Basic expressions
An expression is a {{ between variable, followed by a }}. When the document is generated, expressions are replaced with values from JSON data.
Example of expression in a paragraph
<p>{{myVariable1}} {{myVariable2}}</p>
JSON data
{
"myVariable1": "Hello",
"myVariable2": "World"
}
These expressions are replaced by JSON data and will generate this result
Result
<p>Hello World</p>
Variables are case-sensitive, so ensure that everything you type is correct.
Nested data properties
JSON data can contain nested properties.
JSON data
{
"address": {
"line1": "10 T boulevard de la République",
"city": "La Garenne Colombes",
"zip": "92250"
}
}
In your HTML, use dot-notation to access to the nested properties
Html with nested properties
<p>{{address.line1}}</p>
<p>{{address.city}} {{address.zip}}</p>
Conditionals statements
Use {{#if}} {{else}}/{{else if}} {{/if}} statements to render a block. If its argument returns false, undefined, null, "", 0, the block will not be displayed.
JSON data
{
"author" : true,
"actor": false,
"firstName": "James",
"lastName": "Cameron"
}
Simple IF syntax
<ul>
{{#if author}}
<li>{{firstName}} {{lastName}}</li>
{{/if}}
</ul>
Use the else statement to specify a block of code to be executed if the condition is false.
IF/ELSE syntax
<ul>
{{#if author}}
<li>{{firstName}} {{lastName}}</li>
{{else}}
<li>Nicolas Law</li>
{{/if}}
</ul>
Use the else if statement to specify a new condition if the first condition is false.
IF/ELSE IF syntax
<ul>
{{#if author}}
<li>{{firstName}} {{lastName}}</li>
{{else if actor}}
<li>Brad Pitt</li>
{{/if}}
</ul>
Iteration with arrays
Iteration syntax {{#each}} {{/each}} provides easy to use and more readable expression to iterate through the items of arrays/collections.
JSON data
{
"actors": [
{"firstName" : "Brad", "lastName": "Pitt" },
{"firstName" : "Tom", "lastName": "Cruise" },
]
}
Each interation syntax
<ul>
{{#each actors}}
<li>{{firstName}} {{lastName}}</li>
{{/each}}
</ul>
If your data object is an array of primitive type (string, integer, etc...), you have to insert into your HTML {{ this }}
JSON data
{
"actors": [
"Brad Pitt",
"Tom Cruise",
]
}
Each interation syntax
<ul>
{{#each actors}}
<li>{{ this }}</li>
{{/each}}
</ul>
Avoid Html escaping
By default, expression syntax escape special characters with {{variable}}. To avoid escape characters, use the "triple-stash", {{{variable}}}.
Html escaping
default : {{variable}}
raw : {{{variable}}}
Result
default : & < > " ' ` =
raw : & < > " ' ` =