AEM使用HTL的不同方法

Question

使用以下命令有什么区别：

<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

Answer 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'}" ... />都输出相同的超文本标记语言，该超文本标记语言直接包括资源foo的输出，而不添加任何额外的标签。

但是，如果同样的代码是使用如下HTML元素编写的

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

生成的超文本标记语言将在所包含资源的输出周围包含一个父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>

更多关于数据巧妙解开here的信息。