Accessing handlebars variable via javascript
The value of user.name
needs to be output as a valid JavaScript expression if you want to include it in within a <script>
, which will be reevaluating it as code.
Currently, if user.name
is "john.doe"
for example, the resulting script will be:
var foo = john.doe; // `john` is treated as an object with a `doe` property
The user.name
at least needs to be in quotes so it's understood as a string value/literal.
var foo = "{{user.name}}";
// result
var foo = "john.doe";
You can also take advantage of JSON and JavaScript's similarities in syntax, outputting JSON that JavaScript can understand as an Expression, and will already include the quotes.
Handlebars.registerHelper('json', function (content) {
return JSON.stringify(content);
});
var foo = {{{json user.name}}};
// result
var foo = "john.doe";
Note the triple {{{...}}}
in the last example to disable HTML encoding, so you don't end up with:
var foo = "john.doe"
Node can pass encoded JSON to the handlebars-view like this:
result.render('index', {
encodedJson : encodeURIComponent(JSON.stringify(jsonData))
});
The handlebars-view can decode and parse the json like so:
<script>
var decodedJson = decodeURIComponent("{{{encodedJson}}}");
var jsonObj = JSON.parse(decodedJson);
</script>
Since anything passed to a handlebars-view will basically be injected straight into HTML, you should always pass encoded json and let the view decode it.
I tried the other suggestions in this thread. But they injected unencoded JSON into the handlebars view and that always gave me parsing errors. I have no idea how people got that to work, since it seems like Handlebars will parse variables as plain text.
I have not read up on how the Handlebars parser works - but it seems to me the only safe option is to use encoded JSON, like how I suggest in my examples.