Highlighted

Is there a possibility to persist markup through data-sly-template & data-sly-call?

Avatar

Avatar

skbhardwaj

Avatar

skbhardwaj

skbhardwaj

22-05-2019

Hello everyone,

In one of my tab implementation i am using data-sly-template to generate a consistent markup.

So, I want data-sly-template to persist the markup inside the data-sly-call, after the template is processed.

The representational code is given below:

source.html

<sly data-sly-use.tabTpl="templates/tab.html">

    <!--/* SCENARIO 1 */-->

    <sly data-sly-call="${ tabTpl.tabList @ ariaLabel='LIST_ARIA_LABEL' }">

          <!--/* TABLIST_CONTENT */-->

          <sly data-sly-call="${ tabTpl.tabButton @ title='TAB_NAME', isSelected='true', tabId='TAB_ID' }"></sly>

    </sly>

    <!--/* SCENARIO 2 */-->

    <sly data-sly-call="${ tabTpl.tabPanel @ tabId='TAB_ID' }">

          <!--/* TABPANEL_CONTENT */-->

          <div>hello world markup</div>

    </sly>

</sly>

<sly data-sly-use.tabTpl="templates/tab.html">

    <!--/* SCENARIO 1 */-->

    <sly data-sly-call="${ tabTpl.tabList @ ariaLabel='LIST_ARIA_LABEL' }">

          <!--/* TABLIST_CONTENT */-->

          <sly data-sly-call="${ tabTpl.tabButton @ title='TAB_NAME', isSelected='true', tabId='TAB_ID' }"></sly>

    </sly>

    <!--/* SCENARIO 2 */-->

    <sly data-sly-call="${ tabTpl.tabPanel @ tabId='TAB_ID' }">

          <!--/* TABPANEL_CONTENT */-->

          <div>hello world markup</div>

    </sly>

</sly>

templates/tab.html

<!--/*

    Template to create tab button

*/-->

<sly data-sly-template.tabButton="${ @ title, isSelected, tabId }">

    <button class="tab-button" role="tab" aria-selected="${ isSelected == 'true' ? 'true' : false }" aria-controls="${ tabId }-tab" id="${ tabId }" tabindex="0">

        ${ title }

    </button>

</sly>

<!--/*

    Template to create tab button wrapper

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabList="${ @ ariaLabel }">

    <div class="tab-list" role="tablist" aria-label="${ ariaLabel }">

        <!--/* EXPECTED_TABLIST_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */--> 

    </div>

</sly>

<!--/*

    Template to create tab panel

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabPanel="${ @ tabId }">

    <div class="tab-panel" role="tabpanel" id="${ tabId }-tab" aria-labelledby="${ tabId }">

        <!--/* EXPECTED_TABPANEL_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->

    </div>

</sly>

<!--/*

    Template to create tab button

*/-->

<sly data-sly-template.tabButton="${ @ title, isSelected, tabId }">

    <button class="tab-button" role="tab" aria-selected="${ isSelected == 'true' ? 'true' : false }" aria-controls="${ tabId }-tab" id="${ tabId }" tabindex="0">

        ${ title }

    </button>

</sly>

<!--/*

    Template to create tab button wrapper

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabList="${ @ ariaLabel }">

    <div class="tab-list" role="tablist" aria-label="${ ariaLabel }">

        <!--/* EXPECTED_TABLIST_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->

    </div>

</sly>

<!--/*

    Template to create tab panel

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabPanel="${ @ tabId }">

    <div class="tab-panel" role="tabpanel" id="${ tabId }-tab" aria-labelledby="${ tabId }">

        <!--/* EXPECTED_TABPANEL_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->

    </div>

</sly>

Is there any way to achieve the CONTENT inside template (tabList/tabPanel) ?

Really appreciate any kind of possible solutions to this.

Thanks & Regards,

Shri.