Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Sly logic mismatching

Avatar

Level 5

Hi Team,

 

I have a simple sly logic to wrap a div in two places and it is not working for closing div. any suggestions ?

<sly data-sly-test="${false}">  // this sly isn't going inside when it is false as expected
    <div> //opening div
</sly>
//HERE OTHER HTL AND HTML CODE IS THERE


<sly data-sly-test="${false}"> // this sly is going inside even it is false
   test1   //this line is not executing when condition of sly is false as expected

      </div>  //closing div, this line is executing when condition of sly is false

   test2   //this line is executing  when condition of sly is false
</sly>

output when false

 

</div>

test2

 

So at the end I'm experiencing an extra closing div. The opening div hasn't been executing while ending div executing with the same logic that make a extra closing div in the html structure. Any suggestion would be appreciated.

Thank in advance 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

use data-sly-unwarp

 

<div data-sly-unwrap="${false}">
// here otehr htl code
</div> 

outputs: 
<div>
// here otehr htl code
</div>

 

View solution in original post

6 Replies

Avatar

Community Advisor

@JakeCham 

Have you tried 

<div  data-sly-test.var="a" > Show content here</div>


If the condition is met, the content and div would be shown, if not nothing will show is what I understand.

Avatar

Level 5

<sly data-sly-test="${false}"> /
    <div>        // when the result is false this line isn't executing as expected
</sly>
//HERE OTHER HTL CODE IS THERE
<sly data-sly-test="${false}"> // this sly is not working as expected while same logic at top is working

    a      // when the result is false this line isn't executing as expected
    </div> // when the result is false still this line is executing 

    b // when the result is false still this line is executing 
</sly>

 

here when it is false sly logic on top is working but sly logic at bottom is not working.when result is false bottom sly logic is going inside and executing and printing </div> and ''b''.

Avatar

Correct answer by
Community Advisor

use data-sly-unwarp

 

<div data-sly-unwrap="${false}">
// here otehr htl code
</div> 

outputs: 
<div>
// here otehr htl code
</div>

 

Avatar

Level 5

<sly data-sly-test="${false}"> /
    <div>        // when the result is false this line isn't executing as expected
</sly>
//HERE OTHER HTL CODE IS THERE
<sly data-sly-test="${false}"> // this sly is not working as expected while same logic at top is working

    a      // when the result is false this line isn't executing as expected
    </div> // when the result is false still this line is executing 

    b // when the result is false still this line is executing 
</sly>

 

here when it is false sly logic on top is working but sly logic at bottom is not working. When the result is false bottom sly logic is going inside and executing and printing </div> and ''b''.

Avatar

Community Advisor

Hi,

You need to use data-sly-unwrap not data-sly-test to remove or add parent divs based on some condition.