handlebars templating engine

Basics

jsreport handlebars engine uses handlebars library and therefore is fully compatible with it. This page contains only some examples. Full documentation is located at http://handlebarsjs.com

Data binding

You can use values from report input data using {{...}} tags.

Assuming following input data object

{
    "title": "Hello world"
}

you can use {{title}} to pring Helo world

<h1>{{title}}</h1>

Note handlebars {{a}} syntax escapes html. In case you have an html in the input and want to print it, use triple brackets syntax {{{someHtml}}}.

Conditions

Assuming folowing input object:

{
    "shouldPrint" : true,
    "name" : "Jan Blaha"
}

Then you can use shouldPrint bool value in the if condition. For more sophisticated condition see Helpers section.

{{#if shouldPrint}}
    <h1>{{name}}</h1>
{{/if}}

Loops

Assuming following input data object

{
    "comments": [ {"title": "New job", "body": "js developers wanted at... " }]
}

You can simply iterate over comments using each

{{#each comments}}
  <h2>{{title}}</h2>
  <div>{{body}}</div>
{{/each}}

Helpers

jsreport report template contains content filed with javascript templating engines tags and helpers field where you can place some javascript functions and then use them.

For example you want to have an upper case helper function. You can register a global function inside a helpers field with the following code:

function toUpperCase(str) {
    return str.toUpperCase();
}

And then you can call function in handlebars using:

say hello world loudly: {{{toUpperCase "hello world"}}}

The helper parameters can be dynamically calculated using handlebars subexpressions and this way you can use another helper to calculated the arg value.

{{outer-helper (inner-helper 'abc') 'def'}}

Calling helper from helper

Handlebars allow calling a helper from another helper through Handlebars.helpers.helperName. The following snipped shows how to do this in jsreport helpers section.

const  Handlebars = require('handlebars')

function helperA () {
  return  'helperA'
}

function helperB () {
  return  Handlebars.helpers.helperA()
}

Root context

jsreport quite often provides some heplful information on the root data context. This is for example case of the resources or pdf utils extensions. You will need to reach the root context if you want to get resources object when you are for example inside a loop. This can be done in the following way.

{{#each items}}
  {{@root.$localizedResource.message}}
{{/each}}

The root context can be reached inside a helper function using the last argument opts.data.root.

function aHelper(someArg, opts) {
  return opts.data.root.rootProp
}

Thirdparty helper libraries

There are plenty of thirdparty libraries providing additional handlebars helpers like handlebars-helpers or handlebars-intl. To use such a library in jsreport, you need to install it from npm and then require it at the top of the template's helpers.

npm install handlebars-intl

const handlebars = require('handlebars');

const HandlebarsIntl = require('handlebars-intl');
HandlebarsIntl.registerWith(handlebars);

npm install handlebars-helpers

const handlebars = require('handlebars');

const helpers = require('handlebars-helpers')({
  handlebars: handlebars
});