data-sly-list how to check for first item

1
votes

Using data-sly-list I can iterate over a list object in Sightly, but how can I check for first 

<li>

and add a specific class to it ? Also, how to display every item separately ? for now my list looks like one LI with all items separated by coma. (<li> item1,item2,item3 </li>)

<ol data-sly-list="${currentPage.title}">
     <li>${properties.title}</li>
</ol>

I did try with: 

<div data-sly-test="${!first}">

but didn't worked... any ideas ?

2
listaemsightly

2 Answers

2
votes

Check the spec, you can use the itemList variable for this:

<ol data-sly-list="${['a', 'b', 'c']}">
  <li class="${itemList.first?'first':''}">${item}</li>
</ol>
0
votes

In standard AEM example templates and components, jcr:title is a single value field, so iterating ${currentPage.title} will only generate one list item. Your code should look something like this:

<ol data-sly-list="${currentPage.title}">
     <li class="${itemList.first?'first':''}">${item}</li>
</ol>

But I am not sure, what you are up to. Is jcr:title a multi value field in your page component? Or is it single value and contains a comma separated list?

If jcr:title is a multivalue field, then there's the next problem, as the method getTitle() from com.day.cq.wcm.api.Page returns a String value and not a list value.

You'd have to use the properties object then instead:

<ol data-sly-list="${properties.jcr:title}">
     <li class="${itemList.first?'first':''}">${item}</li>
</ol>

That should do the trick for you.

My advice would be to switch jcr:title back to a single value field if possible in order to keep the internal APIs working and add another field instead (i.e. myTitle) that could be a multi value field.