Сделать компонент связываемым или не основанным на диалоге

Question

У меня есть компонент, и я хочу дать авторам возможность в диалоговом окне добавить путь ссылки.Если этот путь ссылки заполнен, то я хочу, чтобы обертка компонента была тегом <a>.Если он не заполнен, я хочу, чтобы он оставался <div>

<div class="section" data-sly-test="${!properties.path}">
    <img src="${properties.icon}" alt="${properties.alt}" />
    <div data-sly-test="${properties.heading}">
        <h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
    </div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
    <img src="${properties.icon}" alt="${properties.alt}" />
    <div data-sly-test="${properties.heading}">
        <h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
    </div>
</a>

Есть ли более чистый способ сделать это, чем создание двух отдельных компоновок всего компонента с переключателем data-sly-test?Я боролся со многими примерами, подобными этому, где тег / div обтекания изменяется диалогом.Ищите что-то похожее на поведение data-sly-element на <h2> в моем коде.

Answer 1

Есть несколько способов добиться того, что вы пытаетесь сделать.

Использование data-sly-element и data-sly-attribute

data-sly-attribute не добавляет атрибут к тегу, еслизначение атрибута пустое / пустое.Следовательно, его можно использовать, как показано ниже, для замены тега привязки на div, если путь недоступен.

<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
    <img src="${properties.icon}" alt="${properties.alt}" />
    <div data-sly-test="${properties.heading}">
        <h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
    </div>
</a>

Использование data-sly-unwrap

Unwrap удаляет только содержащий тег и не удаляет все внутренние теги.Следовательно, это можно использовать, как показано ниже.

<div class="section" data-sly-unwrap="${properties.path}">
    <a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
        <img src="${properties.icon}" alt="${properties.alt}" />
        <div data-sly-test="${properties.heading}">
            <h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
        </div>
    </a>
</div>

Использование data-sly-template и data-sly-call

Это похоже на то, что вы написали изначально, но вместо дублирования всего внутреннего HTML, оно можетперенести в шаблон и вызвать дважды.

<div class="section" data-sly-test="${!properties.path}">
    <sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
    <sly data-sly-call="${tpl}"></sly>
</a>

<!--/* The template */-->
<template data-sly-template.tpl="">
    <img src="${properties.icon}" alt="${properties.alt}" />
    <div data-sly-test="${properties.heading}">
        <h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
    </div>
</template>

Для получения дополнительной информации об операторах блокировки HTL см. этот официальный документ .