I am trying to make a set of variables with a variable variable using a series of nested Handlebars templates, and the result that comes out is completely devoid of HTML tags, despite using a "triple strike" and returning a SafeString.
I have data similar to:
{ "type": "person", "details": [ {"name": "firstname", "value": "joe"}, {"name": "lastname", "value": "smith"}, { "name": "company", "value": "acme", "details": [ {"name": "address", "value": "123 Main St; Somewhere, CA"}, {"name": "employees", "value": "10+"} ] } ] }
and I have some templates like this:
<template id="personDetails"> <ul> {{{renderPersonDetails details}}} </ul> </template> <template id="companyDetails"> <ol> {{{renderCompanyDetails details}}} </ol> </template>
I pass the whole object to the first template. In the template, I pass the "details" collection to the registered helper: "renderPersonDetails". The first two elements are simple and returned as two LI elements. They look great.
When we get to the third element with the “details” property, I pass this object to the companyDetails template, which in turn will pass the “details” collection to the renderCompanyDetails helper.
The renderCompanyDetails helper results are completely HTML-free, though:
1. we use a triple stamp
2. we return the contents in the Handlebars.SafeString object
3. If I return the html to the console before returning, I see HTML as expected
Obviously, this example can be greatly simplified. However, our use case requires this type of processing due to the nature of the data and rendering requirements.
By the way, the renderCompanyDetails helper creates the HTML in the helper. If I try to transfer data from the helper to the third template and return THAT, the HTML is completely deleted before I even do it ...