Sightly - Empty check on list HTL

Question

How to check the empty list on Sightly? I wanted to prevent render the item-list DIV if there was no item on itemImgaeList. But it returns me one (1) always if there were no items while trying with -

LIST_SIZE_PRINT = "${container.itemImgaeList.size}"; // retrun 1 

HTL:

<div data-sly-test="${container.itemImgaeList.size > 1}">
  <sly data-sly-list.imageList="${container.itemImgaeList}">
    <div class="item-list">
        <picture>
            <img alt="${imageList.qlImageText}" src="${imageList.qlImagePath}" />
        </picture>
    </div>
  </sly>
</div>

Any help?

Clientele

Answer 1

data-sly-list can be used for implementing the above requirement of rendering the list elements only when the list is not empty.

The use of 'data-sly-test' is not required for checking a list, as the check for emptiness is done inherently by data-sly-list.

Here is a working example using data-sly-list:

<div class="item-list" data-sly-list.item="${container.itemImgaeList}">
    <picture>
        <img alt="${item.qlImageText}" src="${item.qlImagePath}" />
    </picture>
</div>

---

More information:

https://www.aemquickstart.in/2016/08/htl-sightly-notes.html

Cyrille