Sightly incrementing numbers

[kevingtan]

Hi All,

Is there a way to increment an integer within a sightly block? I like to convert the JSP code to Sightly, but it looks like Sightly lacks the capability of incrementing. Here's what I like to achieve:

JSP:

<c:set var="counter" value="1"/>

<c:set var="blockOpen" value="false"/>

<c:forEach items="${comp.items}">

    <c:set var="counter" value="${counter+1}"/>

    // -- if blockOpen, will print out <li>, later will close the <li> tag depending on the condition

    // the <li> tag will carry the counter as

    <li class="my-list__${counter}">

    // -- under some conditions

    <c:set var="blockOpen" value="${true}"/>

</c:forEach>

My best understanding is that the most similar code in Sightly will a list, but it's quite different from JSP. First of all you can't increment the counter, second, you can't toggle the boolean values. For instance,

<sly data-sly-set.blockOpen="false"/>

<sly data-sly-repeat="whatever">

    // -- trying to create utility sling model by injecting the number, and it fails

    <sly data-sly-use.myUtils="${'mysite.models.UtilsModel' @ counter = my_number_here}">

    ...

    // incrementCounter takes care of the logic, no luck

    <sly data-sly-set.counter="${myUtils.incrementCounter}"/>

    // -- won't pick this up, either, if I print out ${blockOpen}, it's always false

    <data-sly-set.blockOpen="true"/>

</sly>

Is it the only way to achieve this is to create a sling model helper completely taking care of the html code?

Thank you very much!

-kt

[ManviSharma]

Hi,

In Sightly, you can use the data-sly-attribute and data-sly-list to achieve the desired result. Here's an example code snippet:

<!-- Initialize the counter -->
<sly data-sly-attribute.counter="${1}" />

<!-- Initialize the boolean -->
<sly data-sly-attribute.blockOpen="${false}" />

<!-- Loop over the items and increment the counter on each iteration -->
<sly data-sly-list.item="${comp.items}">
<!-- Increment the counter -->
<sly data-sly-attribute.counter="${counter+1}" />

<!-- Output the list item with the counter as part of the class name -->
<li class="my-list__${counter}">
<!-- Output the item data -->
${item.data}

<!-- Conditionally close the list item -->
<sly data-sly-test="${blockOpen}">
</li>
</sly>

<!-- Update the boolean flag -->
<sly data-sly-test="${someCondition}">
<sly data-sly-attribute.blockOpen="${true}" />
</sly>
</sly>

In this code, we use data-sly-attribute to initialize the counter and blockOpen variables, and then use data-sly-list to loop over the comp.items array. On each iteration, we use data-sly-attribute to increment the counter and output the list item with the counter as part of the class name. We also use data-sly-test to conditionally close the list item and update the blockOpen boolean flag.

[kevingtan]

Hi @ManviSharma 

Thanks for the code and explanation. I will try that.

-kt

[arunpatidar · Accepted solution]

Hi,

You ca maybe try count property of listItem if that fits in your use case.

e.g.

<ul id="non-empty-list" data-sly-list="${[1, 2, 3, 4, 5]}">
        <li id="list_${itemList.count}" data-first="${itemList.first}" data-middle="${itemList.middle}"
            data-last="${itemList.last}" data-odd="${itemList.odd}" data-even="${itemList.even}">
            ${itemList.count}: ${item}
        </li>
    </ul>

[kevingtan]

Hi @arunpatidar,

That's very useful! Thanks!

-kt