February 23, 2022
Estimated Post Reading Time ~

Is there any way to get a sly element to render inside a script element?

Question: Is there any way to get a <sly> element to render inside a <script> element?

URL: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/lt-sly-gt-element-in-lt-script-gt-tag-not-evaluating/m-p/260965

I have a problem similar to this one: Sightly in &lt;script&gt; tag not evaluating?

In that thread, the problem was that Sightly expressions inside a script element were not being rendered, and the solution was to add @ context = 'scriptString' to the expression.

My situation is a slightly different: Inside my HTML script element, I want to put a Sightly element:

<script id="availabilitiesTemplate" type="text/template" >
    <sly data-sly-include="availabilitiesTemplate.html"></sly>
</script>


But the included file is not rendered to the output.

I suspect this is also a context problem, but I can't find any docs on setting the context on a <sly> element, and none of my experiments have worked. I've tried setting the context:

<script id="availabilitiesTemplate" type="text/template" >
    <sly data-sly-include="${ availabilitiesTemplate.html @ context = 'scriptString'         }"></sly>
</script>


I've also tried assigning the template with a data-sly-use expression:
<sly data-sly-use.avail="availabilitiesTemplate.html"></sly>
<script id="availabilitiesTemplate" type="text/template" >
    ${avail @ context='scriptString'}
</script>


Neither of these approaches works either; in all cases the output is

<script id="availabilitiesTemplate" type="text/template" >
</script>

Solution:
You can try with handlebar use this line to include resource in script.
<script id="my-handlebar-template" type="text/x-handlebars-template" data-sly-include="handlebar.html">
</script>

Without separating this example into two distinct files, the expression of the example should have been written as follows:

${properties.jcr:title @ context='text'}

component.html
<script id="my-handlebar-template" type="text/x-handlebars-template" data-sly-include="handlebar.html">
</script>

handlebar.html
<body>
    <p>${properties.jcr:title}</p>
</body>


Source:
https://gist.github.com/gabrielwalt/0f949175a5cc068b44a6


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.