Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

how to use HTL expressions inside a handlebars template (text/x-handlebars-template)?

Avatar

Level 9

I have an HTL template that contains a handlebars template (<script id="topic-header-base" type="text/x-handlebars-template">).

My problem is that displaying the value of an HTL variable inside a handlebars templates gives me blank. It seems to be the HTL inside the template is ignored.

In my code below: this is what I get on the browser => inside template1 - inside handlebars template - product.year: (product.year is empty/null)

 

Basically I want to use data-sly-test to hide/show pieces of content/information in my handlebars template.

 

here's my full code

 

 

    <sly data-sly-use.make="${'com.myhost.core.impl.view.page.ProductPageHelper'}"></sly>

    <h3>ourside of template - year: ${make.product.year}</h3>
    <sly data-sly-test="${make.product.year > 2020}"><h3>outside of template - greater than 2020</h3></sly>

    <sly data-sly-use.template1="template1.html" data-sly-call="${template1.template @ product=make.product}" data-sly-unwrap></sly>
    <div id="template1-target"></div>

    <script type="text/javascript">
        $( document ).ready(function() {
            $("#template1-target").html(Handlebars.compile($("#template1-base").html())());
        });
    </script>
    contents of template1.html
    <template data-sly-template.template="${@product}">
        <h3>inside template1 -  outside handlebars template - product.year: ${product.year}</h3>

        <sly data-sly-test="${product.year > 2020}"><h3>inside template1 - outside handlebars template - insert-link-here</h3></sly>

        <script id="template1-base" type="text/x-handlebars-template">
            <h3>inside template1 -  inside handlebars template - product.year: ${product.year}</h3>

            <sly data-sly-test="${product.year > 2020}"><h3>inside template1 - inide handlebars template - insert-link-here</h3></sly>
        </script>
    </template>

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 2
2 Replies

Avatar

Correct answer by
Level 2