In this cheatsheet, to simplify, models are represented as JSON.
\{{! code comments }}
HTML is escaped by default.
\{{person}}
When you use a "triple-stache" the HTML is unescaped.
\{{{person}}}
A block expression in Handlebars works like a block tag in HTML, with each block beginning with an "open tag" and ending with a "close tag".
\{{#property}}
Content...
\{{/property}}
\{{^foo}}
Homes for sale
\{{/foo}}
Inverted blocks begin with a circumflex (^
) and behave in a similar way to the built-in {{unless}} helper. Thus, the following content will only render when foo
does not satisfy one of the following conditions:
If the content is:
false/empty list
: content is not renderedtrue scalar value
: content will be renderedhash value
: context set to hash before rendering contentlist value
: loops through list, sets context to each element before rendering contentfunction
: passes content to the function (see docs)
this
refers to current context
\{{my_tag this}}
Use .
paths to access nested contexts
\{{person.name}}
Use absolute paths, too
\{{one.two}}
Use ../
paths to access ancestor contexts
\{{../company.name}}
Use []
to access a list element
\{{articles.[5]}}
\{{#if}}
Yes
\{{else}}
No
\{{/if}}
\{{#unless}}
Content
\{{/unless}}
\{{#with}}
Content
\{{/with}}
\{{#each}}
Content
\{{/each}}
Single-Tag:
\{{myHelper [args]}} -> function ([args])
Block:
\{{#myHelper [arg]}} blah
\{{/myHelper}} -> function (arg|context, fn)
Allowed arguments:
- Strings
- context paths
- Hash args (
foo="bar"
) - Options?
this
: always set to the current context within the helper
and to escape something inside your helper
Handlebars.Utils.escapeExpression(string)
To prevent your helper's output from being HTML-escaped
Handlebars.SafeString(string)
Use \
for escaping the Handlebars template itself.
\\{{ page.title }}
This will prevent the template from being compiled.
Template:
\{{#posts}} <li>\{{{link_to this}}}</li> \{{/posts}}
Helper:
Handlebars.registerHelper('link_to', function (context) {
return '<a href="' + context.url + '">' + context.body + '</a>';
});
Handlebars also allows for name conflict resolution between helpers and data fields via a this
reference:
<p>{{./name}} or {{this/name}} or {{this.name}}</p>
Any of the above would cause the name
field on the current context to be used rather than a helper of the same name.
Partials:
{{#each items}}
{{! Passes the current item in items to your partial }}
{{> item-template this}}
{{/each}}
Template:
\{{#posts}} <li>\{{{headline title class="foo"}}}</li> \{{/posts}}
Helper:
Handlebars.registerHelper('headline', function (title, options) {
var attrs = [];
for(var prop in options.hash) {
attrs.push(prop + '="' + options.hash[prop] + '"');
}
return new Handlebars.SafeString(
"<h2 " + attrs.join(" ") + ">" + title + "</h2>"
);
});
Template:
\{{#people}} <li>\{{{#link}}}\{{name}}\{{/link}}</li> \{{/people}}
Helper:
Handlebars.registerHelper('link', function(context, fn) {
return '<a href="/people/' + this.__get__("id") + '">' + fn(this) + '</a>';
});
Inline another template's contents (inherits context)
\{{> template-name }}
\{{#people}} <li>\{{> link}}</li> \{{/people}}
Handlebars.registerPartial('link', '<a href="/people/\{{id}}">\{{name}}</a>')
<script type="text/x-handlebars" [data-template-name="intro"]>
My name is \{{name}}.
</script>
A really good help to understand and refer to fix mistakes!! Thanks!!!