Handlebars array rendering issue in AEM

[Ganesh_Pathak]

Hi,

I am new to AEM and facing one strange issue with Handlebars js support in AEM. I have created a simple component with .hbs file. Within hbs file I am simply rendering the JSON array using handlerbars iteration mechanism. It does iterate the array but it does not print the actual value of any of its object element.

Handlebars code and String array

Result of the page rendering. It does not print the value of "linkText". However it does print the whole object using {{this}}.

I am not sure what's wrong here as this handlerbars code perfectly works when run outside the AEM/CRXDE context.

Quick reply to this issue would really be appreciated.

Thank you in advance

Regards,

Ganesh

[smacdonald2008]

If you look at the Weekend tutorial, which is a great guideline for AEM development, there is no mention of using this framework. Adobe recommends HTL for component development. Core components are all HTL based.

[Ganesh_Pathak]

Hi Scott,

Thank you for your reply. As per this Adobe documentation Social Component Framework  and SCF Handlebars Helpers it seems that AEM does support handlerbars js. But it strange that only iteration mechanism doesn't work properly but all other handlebars features does work.

Regards,

Ganesh

[smacdonald2008]

That could be a bug. I have never used it to develop components. I will check with the Community product team to see if anyone knows about this,

[Gaurav-Behl]

Make sure that if you are using client side version of hbs, then you have the required hbs library/dependencies loaded on that page. If you use it outside social framework, then you'd need to include it explicitly on your page/component/template based on your use case.

[Ganesh_Pathak]

Thanks Gaurav for your reply. Could you tell me what library or dependencies it required on client side? If you could show me a sample code then that would be really great.

Thanks in advance.

[Gaurav-Behl · Accepted solution]

Use cq.handlebars (/libs/clientlibs/social/thirdparty/handlebars) or download js from https://handlebarsjs.com/ and embed it in your clientlibs otherwise use CDNjs url in headlibs

Examples are available in social/community code or at https://handlebarsjs.com/