图像中给定示例的数据狡猾测试的功能

时间:2019-03-19 09:18:31

标签: aem sightly htl

请找到以下代码段。谁能解释上述用于数据狡猾测试的功能。图像在这里如何工作?

<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>

3 个答案:

答案 0 :(得分:2)

这里有几件事要提到。该代码段的要旨是,<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>时,才会渲染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>

答案 1 :(得分:1)

specificationdata-sly-test中所述:

  

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

对于您而言,如果fileReferece属性的值为true(不为null,不为空),它将呈现:

<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>

答案 2 :(得分:0)

基本上检查当前资源属性(即组件属性)是否包含fileRefernce,然后将添加图像标签。