Difference between <sly data-sly-list> and <sly data-sly-repeat> | Community
Skip to main content
A
arindam6600
Level 4
December 15, 2023
Solved

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

  • December 15, 2023
  • 2 replies
  • 11526 views

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?

    Best answer by aanchal-sikka

    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?


    @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

    2 replies

    aanchal-sikka
    Community Advisor
    aanchal-sikkaCommunity Advisor
    Community Advisor
    December 15, 2023

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

     
    Aanchal Sikka
      A
      arindam6600Author
      Level 4
      December 15, 2023

      @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
        Community Advisor
        aanchal-sikkaCommunity Advisor
        Community Advisor
        December 15, 2023

        @arindam6600 

         

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

        Aanchal Sikka
          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          December 15, 2023

          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>

          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.

          Arun Patidar
            Terms & ConditionsAccessibility statement

            Loading footer...