Views

We use Handlebars as templating engine to render JSON-data fetched from REST.

Handlebar-templates added to folder views/ are compiled by Grunt/Gulp into base-responsive-views.js, and are exposed as J.views["view-name"]

Handlebar-templates added to a module's views-folder core/modules/**/views/**.hbs will be compiled into base-responsive-views.js, and are exposed as J.views["module-name/view-name"]

NOTE: For escaping HTML use triple-brackets {{{ htmlBlock }}} instead of double brackets {{ htmlBlock }} (Fiddle with this, if all else fails there is a "unescape" helper as a last resort)

Helpers

{{translate "buyButton"}} Uses string as argument to return translated object. Strings to be translated need to be added to array J.translate[]

{{config "urls.CountryRootUrl"}} Returns string from J.config

{{currentCulture}} Returns string from J.data.culture

{{currentLanguage}} Returns string from J.data.language

{{isVatIncluded}} Returns bool from J.checker.isVatIncluded

{{isStage}} Returns bool from J.checker.isStage

{{unescape String }} Unescapes strings and blocks using DOMParser().parseFromString

{{ifCond var1 '==' var2 }} If/else with value comparison, offers more features then ifValue. Read more

{{ifValue name equals="value"}} If/else with value comparison.

Example usage for ifValue

{{#ifValue DiscountedPrice equals="-1"}}
    {{PriceString}}
{{else}}
    {{DiscountedPriceString}}
{{/ifValue}}

Note

When using a helper to evaluate an expression, the helper need to be surrounded by parenthesis, (helperName), otherwise comparison will always result in false.

Example

{{#if (isVatIncluded) }}
    {{PriceString}}
{{else}}
    {{PriceStringWithoutVat }}
{{/if}}

In this example the value from isVatIncluded are set from a helper, and not from a native JSON-object from the REST-response.

Since the bool is not a data value from the model it can't be compared properly, surrounding the value with parenthesis will make it work.

Resources

Official Site

Browser Sandbox

Introduction to Handlebars