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.
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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.
Views
Likes
Replies