I am aware of the differences between data-sly-list and data-sly-repeat wherein data-sly-list is used to list the children and data-sly-repeat also lists the children but with every iteration the div also gets repeated. Now, the interviewer asked me so what happens when we do sly data-sly-list and sly data-sly-repeat. What will be the difference? Can someone please explain me the same?
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
@arunpatidar has explained it in a really nice manner.
One: If you need the index or count information, use data-sly-list
; otherwise, data-sly-repeat
is usually more straightforward for simple iterations.
Two: If you need feature like skip, odd,even etc use data-sly-list
Please refer to http://www.sgaemsolutions.com/2018/03/deep-dive-in-htlsightly-in-aem-63.html
Section "Difference between data-sly-list and data-sly-repeat". It Also covers additional features of data-sly-list
In general:
The difference between data-sly-list and data-sly-repeat is that list just iterates the items written inside its condition.
<ul data-sly-list="${ currentPage.listChildren }">
<li> ${item.name} </li>
</ul>
|
Fig 1: DOM Structure of data-sly-list statement
But if you put the same statement with data-sly-repeat, it will iterate the complete structure including the conditional statement as well.
Example:
<ul data-sly-repeat="${ currentPage.listChildren }"> <li> ${item.name} </li> </ul> |
|
@aanchal-sikka - Yes, this I am aware of. What I am not sure of is if there would be any difference for sly data-sly-list. Like sly data-sly-list and data-sly-list has the same behavior?
data-sly-list has some additional option. Its explained in the blog I had shared earlier
I'll try to reframe the question. My question was : Does the sly tag before data-sly-list i.e <sly data-sly-list> make any difference to the original behavior of data-sly-list.
Note : I want to know the difference between <sly data-sly-list> and <sly data-sly-repeat>. Does the sly tag prior to data-sly-list change any behavior of data-sly-list?
There is no difference in the behavior on using sly.
Just when we use <sly> there is no outer container for that list. So, sly element is just iterating. It will not contribute anything to HTML, by itself
Scenario:
<div data-sly-list="${ currentPage.listChildren }">
${item.name}
</div>
<div>
ChildPage1
ChildPage2
</div>
Scenario-2:
<sly data-sly-list="${ currentPage.listChildren }">
${item.name}
</sly>
ChildPage1 ChildPage2
okay so in case of data-sly-list :
<sly data-sly-list="${ currentPage.listChildren }">
${item.name}
</sly>
Output : ChildPage1 ChildPage2
data-sly-repeat:
<sly data-sly-repeat="${ currentPage.listChildren }">
<li> ${item.name} </li>
</sly>
Output : ChildPage1 ChildPage2
Am I correct? If so then if we use sly tags data-sly-list and data-sly-repeat practically are the same?
@arunpatidar has explained it in a really nice manner.
One: If you need the index or count information, use data-sly-list
; otherwise, data-sly-repeat
is usually more straightforward for simple iterations.
Two: If you need feature like skip, odd,even etc use data-sly-list
In Adobe Experience Manager (AEM), both data-sly-list
and data-sly-repeat
are used for iterating over collections in HTL (HTML Template Language). However, they have different use cases and behavior.
data-sly-list
:
item
, itemList
, itemIndex
, itemCount
, etc.<ul data-sly-list="${myList}" data-sly-unwrap>
<li>${item} (Index: ${itemIndex}, Total: ${itemCount})</li>
</ul>
data-sly-repeat
:
Example:
<ul data-sly-repeat="${myList}" data-sly-unwrap>
<li>${item}</li>
</ul>
Here's a quick summary:
data-sly-list
is more feature-rich, providing information about the index and count of items in the collection.
data-sly-repeat
is more concise and is suitable when you only need to iterate over the items without requiring additional information about the iteration.
Choose between them based on your specific requirements. If you need the index or count information, use data-sly-list
; otherwise, data-sly-repeat
is usually more straightforward for simple iterations.
Views
Like
Replies
Views
Likes
Replies