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

Forum|Forum|4 years ago
July 20, 2021
1 reply
1287 views

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>