Difference between <sly data-sly-list> and <sly data-sly-repeat>

[arindam6600]

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?

[aanchal-sikka]

@arindam6600 

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.

Example:

<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>

[arindam6600]

@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?

[aanchal-sikka]

@arindam6600 

data-sly-list has some additional option. Its explained in the blog I had shared earlier

[arindam6600]

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?

[aanchal-sikka]

@arindam6600 

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

[arindam6600]

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?

[aanchal-sikka · Accepted solution]

@arindam6600 

@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

[arunpatidar]

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:

1. • Used when you want to iterate over a collection and also get information about the current item's index and the total number of items in the collection.
   • It sets additional variables such as item, itemList, itemIndex, itemCount, etc.
   • Example 

   <ul data-sly-list="${myList}" data-sly-unwrap>
       <li>${item} (Index: ${itemIndex}, Total: ${itemCount})</li>
   </ul>

2. data-sly-repeat:

   • Used when you just need to iterate over a collection without requiring information about the index or total count.
   • It simplifies the syntax and is generally more concise.

   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.