AEM sightly - include html - Pass data

[SonuR1]

Hi all,

I'm trying to include html files in sightly and having issue while passing attributes to html file. 

Below is what I'm trying:

original HTL code: 

<sly data-sly-use.model="com.test.SampleModel">
    Heading: ${model.title}
    <!-- PART 1 -->
    <sly data-sly-list.pageList1="${model.pagesList1}">
        <ul>
            <li>
                Page Title: ${pageList1.title}
            </li>
        </ul>
    </sly>
    <!-- PART 2 -->
    <sly data-sly-list.pageList2="${model.pagesList2}">
        <ul>
            <li>
                Page Title: ${pageList2.title}
            </li>
        </ul>
    </sly>
</sly>

I want to have different html for PART1 & PART2 and write logic over there.

Wanted to change something like below:

<sly data-sly-use.model="com.test.SampleModel">
    Heading: ${model.title}

    <sly data-sly-include="part1.html"></sly>
    <!-- PART 2 -->
    <sly data-sly-include="part2.html"></sly>

</sly>

But questions is how do I pass model object to the included file so that I don't need to call sling model on each file?

please advise. 

[B_Sravan · Accepted solution]

you can use HTL's template and call and also using them you can pass data.

Inside your component create a template folder(not mandatory but to maintain clean folder structure), under template folder, create a "template.html" file.

In "template.html", have your part-1 and part-2 variations like below. 

<template data-sly-template.partOne="${@ dataObject}">your part 1 html code</template>

<template data-sly-template.partTwo="${@ dataObjectExample}">your part 2 html code</template>

on your component.html,  you can use the above template file as below.

<sly data-sly-use.model="com.test.SampleModel">
<div data-sly-use.htmlVariation="/./template.html (path to template.html)">
    <div data-sly-call="${htmlVariation.partOne @ dataObject=model.pageList1}"></div>
    <div data-sly-call="${htmlVariation.partTwo @ dataObjectExample=model.pageList2}"></div>
</div>
</sly>

by using @ option, you can pass the date from your model to your respective template.