So I have a similar code in my HTL (please click link for a non-AEM test page)
<div id="base">
<a href="{{link}}">{{text}}</a><br>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js" ></script>
<script type="text/javascript">
var source = document.getElementById("base").innerHTML;
var template = Handlebars.compile(source);
var context = {text: "My New Post", link: "https://www.google.com"};
var html = template(context);
console.log(html);
</script>
My issue is that under AEM, the a tag disappears. If I change the href property to
<a href="##">{{text}}</a>
it works fine.
I've tried using the built-in HandlebarsJS inside AEM (/etc/clientlibs/granite/handlebars) via clientlibs and the external HandlebarsJS (via CDN) and they are not working.
If you try the test link (see 1st line), handlebars is working properly outside of AEM.
Any ideas? Thanks
