Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Sightly data-sly-repeat

Avatar

Level 4

Can someone help me understand the difference between the data-sly-list and data-sly-repeat sightly tags and scenarios in which each one can be used?

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi

Please find below a reference article:-

data-sly-repeat

With data-sly-repeat you can ‘repeat’ and ele­ment mul­ti­ple times based on the list that is specified.

<div data-sly-repeat="${ currentPage.listChildren }">${item.name}</div>

This works the same way as data-sly-list, except that you don’t need a con­tainer element.

You can also refer to the ‘item’ for attrib­utes, here an example:

<div data-sly-repeat="${ currentPage.listChildren }" data-sly-attribute.class="${item.name}">${item.name}</div>

Link: http://blogs.adobe.com/experiencedelivers/experience-management/new-sightly-features/

Another article :-

Q6). What is data-sly-repeat tag in Sightly?
This tag is used to iterate any of the list element.

Q7). We can do that using data-sly-list in Sightly?
Yes, you can do that by using data-sly-list but the only difference is that, if you use data-sly-repeat, you will not have to provide any container element.

Q8). Not getting your point, could you please elaborate on your statement i.e. any container element?
Let us consider you want to iterate all child pages of currentPage object then first use data-sly-list you will write the code as –

 
1
2
3
<div data-sly-list="${ currentPage.listChildren }">
      ${item.name}
</div>
 

Output will be generated as –

     
1
test1 test2 test3 test4

And when you view the HTML element structure in you debugger then it will be –

     
1
2
3
4
5
6
<div>
   Test1
   Test2
   Test3
   Test4
<div>

Now use data-sly-repeat

     
1
2
3
<div data-sly-repeat="${ currentPage.listChildren }">
      ${item.name}
</div>

Output will be –

 
 
 
 
 
XHTML
     
1
2
3
4
test1
test2
test3
test4

link:- http://www.accunitysoft.com/tag/data-sly-repeat/

I hope this would help you.

Thanks and Regards

Kautuk Sahni

View solution in original post

3 Replies

Avatar

Level 10

data-sly-list is the best one to use and handles a collection. We have a great AEM community article that Praveen contributed that shows using this tag to handle collections:

https://helpx.adobe.com/experience-manager/using/domparser.html

Avatar

Correct answer by
Administrator

Hi

Please find below a reference article:-

data-sly-repeat

With data-sly-repeat you can ‘repeat’ and ele­ment mul­ti­ple times based on the list that is specified.

<div data-sly-repeat="${ currentPage.listChildren }">${item.name}</div>

This works the same way as data-sly-list, except that you don’t need a con­tainer element.

You can also refer to the ‘item’ for attrib­utes, here an example:

<div data-sly-repeat="${ currentPage.listChildren }" data-sly-attribute.class="${item.name}">${item.name}</div>

Link: http://blogs.adobe.com/experiencedelivers/experience-management/new-sightly-features/

Another article :-

Q6). What is data-sly-repeat tag in Sightly?
This tag is used to iterate any of the list element.

Q7). We can do that using data-sly-list in Sightly?
Yes, you can do that by using data-sly-list but the only difference is that, if you use data-sly-repeat, you will not have to provide any container element.

Q8). Not getting your point, could you please elaborate on your statement i.e. any container element?
Let us consider you want to iterate all child pages of currentPage object then first use data-sly-list you will write the code as –

 
1
2
3
<div data-sly-list="${ currentPage.listChildren }">
      ${item.name}
</div>
 

Output will be generated as –

     
1
test1 test2 test3 test4

And when you view the HTML element structure in you debugger then it will be –

     
1
2
3
4
5
6
<div>
   Test1
   Test2
   Test3
   Test4
<div>

Now use data-sly-repeat

     
1
2
3
<div data-sly-repeat="${ currentPage.listChildren }">
      ${item.name}
</div>

Output will be –

 
 
 
 
 
XHTML
     
1
2
3
4
test1
test2
test3
test4

link:- http://www.accunitysoft.com/tag/data-sly-repeat/

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Avatar

Level 4

kautuksahni wrote...

Hi

Please find below a reference article:-

data-sly-repeat

With data-sly-repeat you can ‘repeat’ and ele­ment mul­ti­ple times based on the list that is specified.

<div data-sly-repeat="${ currentPage.listChildren }">${item.name}</div>

This works the same way as data-sly-list, except that you don’t need a con­tainer element.

You can also refer to the ‘item’ for attrib­utes, here an example:

<div data-sly-repeat="${ currentPage.listChildren }" data-sly-attribute.class="${item.name}">${item.name}</div>

Link: http://blogs.adobe.com/experiencedelivers/experience-management/new-sightly-features/

Another article :-

Q6). What is data-sly-repeat tag in Sightly?
This tag is used to iterate any of the list element.

Q7). We can do that using data-sly-list in Sightly?
Yes, you can do that by using data-sly-list but the only difference is that, if you use data-sly-repeat, you will not have to provide any container element.

Q8). Not getting your point, could you please elaborate on your statement i.e. any container element?
Let us consider you want to iterate all child pages of currentPage object then first use data-sly-list you will write the code as –

     
1
2
3
<div data-sly-list="${ currentPage.listChildren }">
      ${item.name}
</div>

Output will be generated as –

     
1
test1 test2 test3 test4

And when you view the HTML element structure in you debugger then it will be –

     
1
2
3
4
5
6
<div>
   Test1
   Test2
   Test3
   Test4
<div>

Now use data-sly-repeat

     
1
2
3
<div data-sly-repeat="${ currentPage.listChildren }">
      ${item.name}
</div>

Output will be –

 
 
 
 
 
XHTML
 
     
1
2
3
4
test1
test2
test3
test4

link:- http://www.accunitysoft.com/tag/data-sly-repeat/

I hope this would help you.

Thanks and Regards

Kautuk Sahni

 

Thanks, I get the difference now!