HTL 条件渲染而不影响嵌套 html

Question

是否可以使用 HTL 在条件计算结果为 false 时不呈现 HTML 元素但仍呈现嵌套内容？示例：

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

如果值为 false 那么将呈现为：

<B>my content</B>

如果值为 true，则应呈现：

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

Answer 1

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>

Answer 2

这正是 data-sly-unwrap 的用途：

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

（请注意您的示例中的反转条件，因为当 data-sly-unwrap 的计算结果为真时，它将展开元素，即仅显示内容）。

HTL 条件渲染而不影响嵌套 html

HTL conditional rendering while not affecting nested html

html

conditional-statements

aem

sightly