Условный рендеринг HTL без влияния на вложенный html

#html #conditional-statements #aem #sightly

#HTML #условные операторы #aem #sightly

Вопрос:

Возможно ли с помощью HTL не отображать HTML-элемент, если условие оценивается false , но все равно отображает вложенное содержимое? Пример:

 <A renderIf="${properties.value}">
   <B>my content</B>
</A>

Если значение false равно, то это будет отображаться:

 <B>my content</B>

Если значение true равно, это должно быть отображено:

 <A>
   <B>my content</B>
</A>

Ответ №1:

Это именно то, что data-sly-unwrap для:

 <A data-sly-unwrap="${!properties.value}">
   <B>my content</B>
</A>

(обратите внимание на инвертированное условие в вашем примере, потому что, когда data-sly-unwrap принимает значение true, Он развернет элемент, т. Е. Отобразит только содержимое).

Ответ №2:

Отображение на основе условий в HTML возможно с помощью чего-то вызываемого templates . В основном, что делает шаблон, так это скрывает все, что находится внутри тегов, и отображает их, когда условие оказывается истинным. Javascript Для достижения этого вам нужна поддержка.

Пример:

 function validate() {
  if (document.getElementById("userInput").value == "EXAMPLE ANSWER") {
    var temp = document.getElementsByTagName("template")[0]; // Give the correct index of template when you have more than 1 template tag
    var cloneNode = temp.content.cloneNode(true);
    document.body.appendChild(cloneNode);
  }
}

 <input id="userInput" value="EXAMPLE ANSWER"/>
<button onclick="validate()">Validate</button>

<template>
  <h2>That's the right answer!</h2>
</template>

Развернуть фрагмент