图像中给定示例的 data-sly-test 功能

Question

请找到以下代码段。任何人都可以解释上述数据测试功能。图像在这里的工作条件如何？

<div class="spon-image-container col-12 col-md-4">
    <sly data-sly-test="${properties.fileReference}">
        <img class="spon-_image" src="${properties.fileReference}"/>
    </sly>
</div>

Answer 1

它基本上检查当前资源属性（即组件属性）是否包含 fileRefernce 然后它会添加一个图像标签。

Answer 2

如specification所述，data-sly-test:

Keeps or removes the element depending on the attribute value.

对于您的情况，如果 fileReferece 属性的计算结果为 true（不为空，不为空），它将呈现：

<div class="spon-image-container col-12 col-md-4">

        <img class="spon-_image" src="....."/>

</div>

注意 sly 标签 unwraps/removes 本身，这里实际上是不必要的，因为 data-sly-test 属性可以移动到 img。

如果 fileReference 计算为 false，它将呈现：

<div class="spon-image-container col-12 col-md-4">

</div>

Answer 3

这里有几件事要提一下。代码片段的要点是，只有在 {$properties.fileReference} 不为空时才会呈现 <img> 标签。

请注意，此处不涉及健全性检查。 data-sly-test 不会检查引用的文件是否存在等

所以假设 ${properties.fileReference} 等于 /content/dam/myImage.png。然后结果 HTML 会像这样：

<div class="spon-image-container col-12 col-md-4">
    <img class="spon-_image" src="/content/dam/myImage.png"/>
</div>

另一方面，如果 ${properties.fileReference} 为空（或 null），您将得到以下 HTML:

<div class="spon-image-container col-12 col-md-4">
</div>

根据您的 HTML/CSS/JS，您可能不希望这种情况发生。因此，您可以改进代码以在 <div> 标记中包含 data-sly-test 语句：

<div class="spon-image-container col-12 col-md-4" data-sly-test="${properties.fileReference}">
    <img class="spon-_image" src="${properties.fileReference}"/>
</div>

这样，只有在设置了 fileReference 时才会呈现 <div>。但是即使您仍然希望 <div> 出现，您的代码也可以通过删除 <sly> 元素并将 data-sly-test 添加到 <img> 标记来改进：

<div class="spon-image-container col-12 col-md-4">
    <img class="spon-_image" 
         src="${properties.fileReference}"
         data-sly-test="${properties.fileReference}"/>
</div>

图像中给定示例的 data-sly-test 功能

Functionality of data-sly-test for given example in image

aem

sightly

htl