Highlighted

HandlebarsJS not working properly under AEM (a tag disappearing)

jayv25585659

19-03-2018

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

Replies