Sightly not working as expected

This sample works for me (aem6.2 tested):

<ul data-sly-list="${currentPage.listChildren}">
    <sly data-sly-test="${itemList.first}">
        <div>
    </sly>

    <li>${item.name}</li>

    <sly data-sly-test="${itemList.last}">
        </div>
    </sly>

</ul>

Can you try data-sly-template for the elements to open or close an HTML element?

What I think you are facing is that Sighty/HTL is expecting valid HTML.

Hi,

I am facing same issue. I tried the given solution also.

ramanareddy438 wrote...

Hi All,

I am using sightly to iterate through a list and display images. The images list will be fetched from the java class. I adding the code here for your understanding.

1. <div data-sly-use.img="${'GetImages' @ name='carouselimage', res=resource}" data-sly-unwrap > <!-- I am calling a java class (GetImages) to get the image information -->
2. <div class="container-fluid">
3. <div class="row-fluid">
4. <div class="carousel slide" id="myCarousel">
5. <div class="carousel-inner">
6. <div class="item active">
7. <ul class="thumbnails">
8. <p data-sly-list.imgRef="${img.carouselImages}" data-sly-unwrap > <!-- carouselImages list is fetcted from java class -->
9. <li class="span3">
10. <div class="thumbnail" data-sly-test="${!imgRef}">
11. <img src="http://placehold.it/260x180" alt="Alt text">
12. </div>
13. <div class="thumbnail" data-sly-test="${imgRef}">
14. <img src="${imgRef.src}" alt="${imgRef.alt}">
15. </div>
16. <div class="caption">
17. <h5>${imgRef.header}</h5>
18. </div>
19. </li>
20.  
21. <p data-sly-test="${imgRef.breakUl == true}" data-sly-unwrap >
22. <p>Inside checking the condition : ${imgRef.breakUl}</p>
23. </ul> <!-- I am trying to cose the ul and start new ul. Since I need new UL after every four li tags-->
24. </div>
25. <div class="item">
26. <ul class="thumbnails">
27. </p>
28. </p>
29. </div>
30. </div>
31. <a data-slide="prev" href="#myCarousel" class="left carousel-control">&#60;</a>
32. <a data-slide="next" href="#myCarousel" class="right carousel-control">&#62;</a>
33. </div>
34. </div>
35. </div>
36. </div>

Please help me on this. I explained the code in the comments. Please let me know if you need more understanding.

Thanks 
Ramana Reddy

 

Please can somebody answer this question??/

Hi Ramana,

Can you tell us what is not working or what is the issue you are facing ?

It is very hard for me to understand exactly what doesn't work here.

Are you able to provide a smaller example that I can look into?

Feike Visser wrote...

It is very hard for me to understand exactly what doesn't work here.

Are you able to provide a smaller example that I can look into?

 

Thank you Feike Visser for your reply. Below is the code which causing the problem.

<p data-sly-test="${imgRef.breakUl}" data-sly-unwrap > <p>Inside checking the condition : ${imgRef.breakUl}</p> <!--/* Please treat this as log */--> </ul> <!-- I am trying to cose the ul and start new ul. Since I need new UL after every four li tags--> </div></p>

in the above code whenever the breakUl is true then I have to close the <ul> and <div> tags and start new <ul> and <div> tags. And this whole process is done on a list of objects. Some how the <ul> is closing but the <div> is not closing and list is continuing.

Thanks Regards

M. Ramana Reddy

Can you create a small reproducible case, that isn't depending on your Java-class, use resource.listChildren or so for the list.

Then I can have a look.

Feike Visser wrote...

Can you create a small reproducible case, that isn't depending on your Java-class, use resource.listChildren or so for the list.

Then I can have a look.

Thanks Feike Visser for reply. Here I am trying explain the code in the comments. 

<div data-sly-list.imgRef="${img.mapCarouselImages}" data-sly-unwrap > <!--/* Please think this as a list of objects are passed */ --> <span data-sly-test="${imgRefList.first}" data-sly-unwrap > <!--/* For the first time I need the css class "active" */--> <div class="item active"> </span> <span data-sly-test="${!imgRefList.first}" data-sly-unwrap > <!--/* If the element is not the first then I have to close the previous div tag and open the new tag in below condition. here I am getting the IllegalArgumentException : Invalid property name. If I remove this code then it is working but the div is not closing.*/--> </div> </span> <span data-sly-test="${!imgRefList.first}" data-sly-unwrap > <!--/* If it is other than first create the div with normal css class "item" */--> <div class="item"> </span> <ul class="thumbnails"> <!--/* Please don't bother the below code  */--> <span data-sly-list="${img.mapCarouselImages[imgRef]}" data-sly-unwrap > <li class="span3"> <div class="thumbnail" data-sly-test="${!item}"> <img src="http://placehold.it/260x180" alt="Alt text"> </div> <div class="thumbnail" data-sly-test="${item}"> <img src="${item.src}" alt="${item.alt}"> </div> <div class="caption"> <h5>${item.header}</h5> </div> </li> </span> </ul> </div>

I Tried to explain the code in the comments. Please do reply if need any further information.

Thanks in advance

M. Ramana Reddy