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

[skbhardwaj]

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.