Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Handlebars array rendering issue in AEM

Avatar

Level 2

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

1739052_pastedImage_0.png

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

1739057_pastedImage_2.png

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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/

View solution in original post

6 Replies

Avatar

Level 10

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.

Avatar

Level 2

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

Avatar

Level 10

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,

Avatar

Level 10

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.

Avatar

Level 2

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.

Avatar

Correct answer by
Level 10

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/