Handlebar templates define the HTML structure of a widget. You can use placeholders to dynamically integrate data. There are two types of simple placeholders in handlebars.
A placeholder that is enclosed with two curly brackets (for example, {{placeholder}}) is replaced by the value. Special characters for HTML are not interpreted. This ensures the correct display of a value (e.g., umlauts), but the use of HTML tags is not possible. Within placeholders you can also access attributes of objects using point notation.
If you want to output HTML tags, you can use three braces (e.g., {{{placeholder}}}).
Template:
<div>
<h1>{{title}}</h1>
Value 1: {{placeholder.value}}
Link: {{{placeholder.link}}}
</div>
Data:
{
title: "Test"
placeholder: {
value: "The value",
link: '<a href="https://www.jobrouter.com/en">Website</a>'
}
}
Result:
<div>
<h1>Test</h1>
Value 1: The value
Link: <a href="https://www.jobrouter.com/en">Website</a>
</div>
