Sightly Conditional html

[deana66659071]

Is it possible to have a slightly conditional "row"?

Example

       <div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
        <div class="row">
         <div class="even">${groupItemsList.index}</div>       
       </div>
       <div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
         <div class="odd">${groupItemsList.index}</div>       
        </div>
       </div>
 

BTW: the above code does not work ....

Thank you in advance.

-Dean

[Lokesh_Shivalingaiah · Accepted solution]

it is definitely possible !

btw what is the datatype of even or odd in the list ?? if its string, then please check like 

data-sly-test="${groupItemsList.odd == 'true}"

refer [1] for  more example

[1] http://blogs.adobe.com/experiencedelivers/experience-management/sightly-intro-part-3-2/

[Kunal_Gaba_]

The following code is working for me- 

<dl data-sly-list="${currentPage.listChildren}"> <div data-sly-test="${itemList.odd}" data-sly-unwrap> <div class="row"> <div class="odd">   odd </div> </div> </div> <div data-sly-test="${itemList.even}" data-sly-unwrap> <div class="row"> <div class="odd">   even </div> </div> </div> </dl>

[deana66659071]

I'm just using the OOB odd, even, index, etc that comes with the list ... nothing in particular
The problem I have is that the tags do not match and the browser seems to get confused.

I still do not see any example close to the following -- even in the link you provided:

-----------------------------------------------------------------------------------------------
<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
        <div class="even">${groupItemsList.index}</div>      
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>      
    </div>      
</div>
-----------------------------------------------------------------------------------------------

It should produce the following if there are 2 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

It should produce the following if there are 4 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      
<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

[deana66659071]

I understand that this will work, but all of the html "div" tags match ....

What about something like this?

-----------------------------------------------------------------------------------------------
<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
        <div class="even">${groupItemsList.index}</div>      
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>      
    </div>      
</div>
-----------------------------------------------------------------------------------------------

It should produce the following if there are 2 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

It should produce the following if there are 4 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      
<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

[Lokesh_Shivalingaiah]

If you want the above result, then I think this should work

-----------------------------------------------------------------------------------------------

<div class="row">

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap> 

        <div class="even">${groupItemsList.index}</div>      
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>      
    </div>      
</div>
-----------------------------------------------------------------------------------------------

[kautuk_sahni]

Hi 

Yes, please check the datatype of even/Odd. 

if its string, then please check like data-sly-test="${groupItemsList.odd == 'true}"  (As mentioned by Lokesh)

If it is Boolean then what you specified would work , data-sly-test="${groupItemsList.odd }"

For more information, please have a loot at this post :- http://stackoverflow.com/questions/24550498/conditional-attributes-in-sightly-templates-aem-cq

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[deana66659071]

Thank you for your reply, but that's not exactly what I'm trying to do here ...

This is in a loop of a list ...

We can only write out the following when the loop is even ...

<div class="row">
     <div class="even">${groupItemsList.index}</div>     

Likewise, we can write out the following when the value is odd ...
 
     <div class="odd">${groupItemsList.index}</div>     
 </div>     

 
NOTE:  The odd thing here is that the html "div" tags do not match up until the end.

I've tried this and it doesn't work ....

-----------------------------------------------------------------------------------------------
<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
     <div class="even">${groupItemsList.index}</div>     
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>     
    </div>     
</div>

-----------------------------------------------------------------------------------------------

Thank you in advance for your help .... this is just an odd situation that I would think
others may have resolved.

[deana66659071]

I don't have an issue with the .odd or .even attributes of the list, those actually hit when expected

-------------------------- Code Example Start -------------------------------------------------

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="even">EVEN</div>     
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
    <div class="odd">ODD</div>     
</div>

NOTE: All of the html "div" tags match in the code above

Results:
    <div class="even">EVEN</div>     
    <div class="odd">ODD</div>     

-------------------------- Code Example Stop --------------------------------------------------

-------------------------- Non-Working Code Example Start -------------------------------------

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
        <div class="even">${groupItemsList.index}</div>     
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>     
    </div>     
</div>

NOTE: The html "div" tags DO NOT MATCH in the code above

-------------------------- Non-Working Code Example Stop --------------------------------------

[Feike_Visser1]

It is much better and more readable to rewrite:

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="even">EVEN</div>     
</div>

to

    <div data-sly-test="${groupItemsList.even}"  class="even">EVEN</div>