Handlebars static variables - handlebars.js

Question

Is it possible to register static variables for handlebars templates?
I'm using express-handlebars for my backend, where this is possible. For some specific renderings I use HandlebarsJS on the frontend where I can't find a way to accomplish this.
What I want to do is something like
handlebars.static = {foo: 'bar'}
Instead of adding it to every render
template({....., static: {foo:'bar'}});
It would be fine, if I could precompile it into each template.

Answer 1

Define a helper that can access your static values. Here's an example:
var templates = Handlebars.templates = Handlebars.templates || {};
/**
* Reads property from object. Supports reading nested properties with dot or bracket notation.
*/
var readProperty = function(object, property) {
var value = object;
property = property.replace(/\[('|")?|('|")?\]/g, '.');
if (property.substring(property.length - 1) === '.') {
property = property.slice(0, property.length - 1);
}
property.split('.').forEach(function(name) {
value = value[name];
});
return value;
};
/**
* The object that holds the values available to all the templates. This must be accessible by the helper definition.
*/
var values = {
key: 'a value',
lists: {
numbers: [0,1,2,3,5],
},
};
Handlebars.registerHelper('values', function(property) {
return readProperty(values, property);
});
templates['template-a'] = Handlebars.compile($('#template-a').html());
templates['template-b'] = Handlebars.compile($('#template-b').html());
$('body').append(templates['template-a']());
$('body').append(templates['template-b']());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v4.0.5.js"></script>
<script id="template-a" type="text/x-handlebars-template">
<p>here's the value: <strong>{{values 'key'}}<strong></p>
</script>
<script id="template-b" type="text/x-handlebars-template">
<p>again: <strong>{{values 'key'}}</strong><br>
and another one from an array inside an object: <strong>{{values 'lists.numbers[3]'}}</strong><br>
using bracket notation: <strong>{{values 'lists["numbers"]'}}</strong></p>
</script>