AEM 使用 HTL 的不同方式答案

【问题标题】：AEM different ways to use HTL slyAEM 使用 HTL 的不同方式
【发布时间】：2020-12-16 03:08:26
【问题描述】：

使用有什么区别：

<div data-sly-resource="${'foo' @ resourceType="var"} ... ></div>
or
<sly data-sly-resource="${'foo' @ resourceType="var"} ... ></sly>
or
<sly data-sly-resource="${'foo' @ resourceType="var"} ... />

我什么时候应该使用data-sly-unwrap？

【问题讨论】：

标签： aem sightly

【解决方案1】：

我认为了解何时使用什么的最佳方式是understand the fundamentals of HTL。

大部分 HTL 可以围绕现有的 HTML 标记和属性编写，例如

<div data-sly-resource="${'foo' @ resourceType='var'}" ... ></div>

但是，在您不希望 HTML 元素出现在输出中的情况下，您可以利用 sly 元素。当使用 sly 元素时，它会自动从最终呈现的 HTML 中删除。

例如， <sly data-sly-resource="${'foo' @ resourceType='var'}" ... ></sly> 或者 <sly data-sly-resource="${'foo' @ resourceType='var'}" ... /> 都输出相同的 HTML，直接包含资源 foo 的输出，而不添加任何额外的标签。

但是如果使用 HTML 元素编写相同的内容，例如以下

<div data-sly-resource="${'foo' @ resourceType=""var}" ... ></div>

生成的 HTML 将在包含的资源输出周围包含一个父 div 标签，如下所示 <div>HTML output of foo goes here</div>

data-sly-unwrap 在这种情况下发挥作用。将data-sly-unwrap 添加到 HTML 元素会将该元素从生成的输出中排除，但会输出所有子 HTML。

例如，<div data-sly-resource="${'foo' @ resourceType='var'}" ... data-sly-unwrap></div> 和 <sly data-sly-resource="${'foo' @ resourceType='var'}"></sly> 和 <sly data-sly-resource="${'foo' @ resourceType='var'}" /> 将产生相同的输出。

请注意sly 元素上的data-sly-unwrap 无效，因为处理器无论如何都会删除sly。

但是，我认为data-sly-unwrap 的强大之处在于将它与条件语句一起使用。例如，如果一个父元素只需要在某些场景中呈现，那么以下面的方式使用它比我们在 JSP 或 JSTL 中编写多个 if 条件要干净得多。

<div class="parent" data-sly-unwrap="${hideParent}">
    <img class="img" src="../../xyz.jpg" />
</div>

更多关于 data-sly-unwrap here.

【讨论】：