Функциональность data-sly-test для данного примера в изображении - PullRequest
Новая
       29

Функциональность data-sly-test для данного примера в изображении

0 голосов
/ 19 марта 2019

Пожалуйста, найдите приведенный ниже фрагмент.Может ли кто-нибудь объяснить вышеописанную функциональность для data-sly-test.Как это будет работать здесь условие для изображения ?? 

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

2 голосов
/ 19 марта 2019

Здесь нужно упомянуть несколько вещей. Суть фрагмента кода в том, что тег <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} пуст (или равен нулю), вы получите следующий 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 голос
/ 19 марта 2019

Как указано в спецификации , 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>
0 голосов
/ 19 марта 2019

Он в основном проверяет, содержат ли текущие свойства ресурса (то есть свойства компонента) fileRefernce, затем добавляет тег изображения.

...