Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

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

Avatar

Level 5

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?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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


Aanchal Sikka

View solution in original post

8 Replies

Avatar

Community Advisor

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

 

aanchalsikka_0-1702649774937.png

 

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>

aanchalsikka_1-1702649784847.png

 


Aanchal Sikka

Avatar

Level 5

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

Avatar

Community Advisor

@arindam6600 

 

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


Aanchal Sikka

Avatar

Level 5

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?

Avatar

Community Advisor

@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

 


Aanchal Sikka

Avatar

Level 5

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?

Avatar

Correct answer by
Community Advisor

@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


Aanchal Sikka

Avatar

Community Advisor

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:

    • 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>
  1. 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.



Arun Patidar