Utilizing Sightly snippet inside template engine

dibyajyotis2501

08-09-2020

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.

Accepted Solutions (0)

Answers (1)

Answers (1)

BrianKasingli

MVP

08-09-2020

@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.