Sightly data-sly-repeat

[Naveen_AEM_dev]

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?

[smacdonald2008]

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

[kautuk_sahni · Accepted solution]

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

[Naveen_AEM_dev]

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!