Expand my Community achievements bar.

Utilizing Sightly snippet inside template engine

Avatar

Level 2

I'm facing a situation where :

I want to invoke a clientlib cateogory (OOTB) once the markup is formed. Now, the particular markup is injected as compiled template (e.g. mustache) inside the root html where the OOTB clientlib is already invoked. 

Example:

In the below format, clientlib of category core.abc.xyz is loaded with DOM prior to the execution of custom template getting injected. So, even if it is required the presence of "target" class in the html for some necessary clientlib actions (binded over this class),  its not able to take place.

 

<div class ="root">

<sly data-sly-call="${clientLib.all @ categories='core.abc.xyz'}" />

<div>

<script id="result-template" type="text/x-handlebars-template">

     {{#each this}}    <div class="target">   {{/each}}
</script>

</div>

</div>

 

So, I want to know if there is any way to load a OOTB clientlib script via its category after any custom JS event e.g. on-click. There is a way to load it via relative/absolute path, (e.g. $.getScript()) but in case the libs script location gets changed, custom modules will get impacted.

3 Replies

Avatar

Community Advisor

@dibyajyotis2501,

When your view logic for your AEM website is served by a client library, example clientlib-site, you can include a property called dependencies. This will load dependencies that are other registered client libraries apart off the page request, before the clientlib-site. 
Example:

 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="[mycompany.site]"
    dependencies="[cq.jquery,cq.handlebars]"/>

 

 

I hope this helps,
Brian.

Avatar

Level 2

Hi Brian,

 

Thanks for the reply! Actually dependencies was not able to resolve me issue as this will rank the dependent categories only to load before my custom script. But I want to load a libs (OOTB) script after my custom script is called. Because, my template is compiled and html is getting ready with my custom logic; After that, once the markup is ready, I want to place that call.

My component html has one <data-sly-call> to get some core script and my component specific clientlib js has the template injection logic. But due to DOM load precedence, the component clientlib call is placed after.

Avatar

Level 2
Or is there any way to store the resolved client-lib path in DOM which is obtained via data-sly-call?