aem - 图像中给定示例的 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

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

请注意，这里不涉及完整性检查。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，您可能不希望这种情况发生。因此，您可以改进代码以将data-sly-test语句包含在<div>标记中：

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

这样，只有在设置<div>了 a 时才会渲染fileReference。但是即使您仍然希望<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>

Answer 2

如规范中所述，data-sly-test：

根据属性值保留或删除元素。

对于您的情况，如果fileReferece属性评估为true（非空，非空），它将呈现：

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

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

</div>

请注意，sly标签会自行解包/删除，这里实际上没有必要，因为data-sly-test属性可以移动到img.

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

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

</div>

Answer 3

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