| Apr | MAY | Jun |
| 23 | ||
| 2021 | 2022 | 2023 |
COLLECTED BY
Collection: mailchimp.com
<p>{{firstname}} {{lastname}}</p>
{{, some contents, followed by a }}. When the template is executed, these expressions
are replaced with values from an input object.
Learn More: Expressions
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
// compile the template
var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
// execute the compiled template and print the output to the console
console.log(template({ doesWhat: "rocks!" }));
</script>
<p>{{firstname}} {{lastname}}</p>
{
firstname: "Yehuda",
lastname: "Katz",
}
<p>Yehuda Katz</p>
{
person: {
firstname: "Yehuda",
lastname: "Katz",
},
}
{{person.firstname}} {{person.lastname}}
each and with allow you to change the current evaluation context.
The with-helper dives into an object-property, giving you access to its properties
template {{#with person}}
{{firstname}} {{lastname}}
{{/with}}
{
person: {
firstname: "Yehuda",
lastname: "Katz",
},
}
each-helper iterates an array, allowing you to access the properties of each object via simple handlebars
expressions.
template <ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley",
],
}
}} or other handlebars tokens should use the {{!-- --}} syntax.
template {{! This comment will not show up in the output}}
<!-- This comment will show up as HTML-comment -->
{{!-- This comment may contain mustaches like }} --}}
{{firstname}} {{loud lastname}}
Handlebars.registerHelper('loud', function (aString) {
return aString.toUpperCase()
})
this-context of the function.
template {{#each people}}
{{print_person}}
{{/each}}
Handlebars.registerHelper('print_person', function () {
return this.firstname + ' ' + this.lastname
})
# preceeding the helper name and require a matching closing
mustache, /, of the same name. Let's consider a helper that will generate an HTML list:
preparationScript Handlebars.registerHelper("list", function(items, options) {
const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>");
return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});
list to generate our HTML list. The helper receives the people as its first
parameter, and an options hash as its second parameter. The options hash contains a property named fn, which you can
invoke with a context just as you would invoke a normal Handlebars template.
When executed, the template will render:
output <ul>
<li>Yehuda Katz</li>
<li>Carl Lerche</li>
<li>Alan Johnson</li>
</ul>
else section (used, for instance, by the built-in
if helper).
Since the contents of a block helper are escaped when you call options.fn(context), Handlebars does not escape the
results of a block helper. If it did, inner content would be double-escaped!
Learn More: Block Helpers
{{expression}}. If you
don't want Handlebars to escape a value, use the "triple-stash", {{{.
template raw: {{{specialChars}}}
html-escaped: {{specialChars}}
raw: & < > " ' ` =
html-escaped: & < > " ' ` =
Handlebars.SafeString. If you write a helper that generates its own HTML, you will
usually want to return a new Handlebars.SafeString(result). In such a circumstance, you will want to manually escape
parameters.
preparationScript Handlebars.registerHelper("bold", function(text) {
var result = "<b>" + Handlebars.escapeExpression(text) + "</b>";
return new Handlebars.SafeString(result);
});
registerPartial-method:
preparationScript Handlebars.registerPartial(
"person",
"{{person.name}} is {{person.age}} years old.\n"
)
{{#each persons}}
{{>person person=.}}
{{/each}}
{
persons: [
{ name: "Nils", age: 20 },
{ name: "Teddy", age: 10 },
{ name: "Nelson", age: 40 },
],
}
Nils is 20 years old.
Teddy is 10 years old.
Nelson is 40 years old.