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>时，才会渲染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

如specification，data-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>

Answer 3

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

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

3 个答案: