Search code examples
aemslingsightlyhtl

Keep child elements when data-sly-test evaluates to false?


Examine this

<a href="${mybean.href}" data-sly-test="${mybean.href}">
  <img src="myimage.jpg" />
</a>

What we need

when data-sly-test="${mybean.href}" evaluates to false, only hide the anchor tag, and not its child elements. The default behavior is that the img tag will disappear also when the anchor tag disappears. We only want to hide the wrapper tag.

I expect some paramater like this

<a href="${mybean.href}" data-sly-test="${mybean.href @ hideChildren=false}">
  <img src="myimage.jpg" />
</a>

Solution

  • You can use the data-sly-unwrap in your anchor tag as shown below example where mybean.href true result removing of the anchor tag and producing only <img src="myimage.jpg" />

    Example

    <a href="http://www.google.com" data-sly-test="${mybean.href}" data-sly-unwrap>
      <img src="myimage.jpg" />
    </a>
    

    For your case the following solution should work

    <a href="${mybean.href}" data-sly-unwrap="${!mybean.href}">
      <img src="myimage.jpg" />
    </a>