Условные атрибуты в ярких шаблонах (AEM/CQ)

В языке Sightly templating для Adobe AEM6 (CQ), как добавить атрибут к элементу, только если условие истинно, не дублируя много кода/логики?

например.

<ul data-sly-list="${items}" ${if condition1} class="selected"${/if}>
    <li${if condition2} class="selected"${/if}>
        Lots of other code here
    </li>
</ul>

Ответ 1

При настройке атрибутов HTML динамически (с выражением), Sightly угадывает ваше намерение упростить запись:

Если значение представляет собой пустую строку или это ложное логическое значение, то атрибут полностью удаляется.
Например <p class="${''}">Hi</p> и <p class="${false}">Hi</p> отобразить только <p>Hi</p>.
Если значение является истинным булевым, то атрибут записывается как логический атрибут HTML (то есть без значения атрибута, например, для отмеченных, выбранных или отключенных атрибутов формы).
Например, <input type="checkbox" checked="${true}"> отображает <input type="checkbox" checked>.

Затем вы можете использовать два Sightly-оператора для достижения того, что вы хотите (оба работают как в JavaScript): тернарный условный оператор или логический оператор AND (&&).

Тернарный условный оператор

<ul data-sly-list="${items}" class="${condition1 ? 'selected' : ''}">
    <li class="${condition2 ? 'selected' : ''}">
        Lots of other markup here
    </li>
</ul>

Логический оператор И

Для этого вам также необходимо понять, что, как и в JavaScript, ${value1 && value2} возвращает value1, если он ложный (например, false или пустая строка), в противном случае он возвращает value2:

<ul data-sly-list="${items}" class="${condition1 && 'selected'}">
    <li class="${condition2 && 'selected'}">
        Lots of other markup here
    </li>
</ul>

Как сказано, в обоих примерах атрибут класса будет полностью удален, если соответствующее условие является ложным.

Ответ 2

То, что сказал Габриэль, совершенно правильно. Я действительно хотел добавить "gotcha", чтобы посмотреть, хотя. Для записи я столкнулся с одной и той же проблемой, когда в шаблоне Sightly я хотел переключить присутствие атрибута "проверено" входного элемента на основе логического значения. В моем случае это логическое значение исходило из класса Use.

Примерно через 3-4 часа и, находясь на грани вытягивания моих волос, я наконец понял, что логическое значение, на которое я полагался для переключения атрибута "checked", в конечном счете было установлено в методе активации службы Sling я написал, чтобы поддержать работу, которую я делаю. В то время как все остальное было логически правильным, потому что я устанавливал это логическое значение в функции activate(), а затем извлекал его с помощью геттера по мере необходимости, он только когда-либо обновлял его значение при активации пакета, то есть мое представление по существу потеряло бы состояние после первого обновления страница.

Я знаю, что это глупо, но я хотел назвать это, потому что это актуально здесь, и это может помочь кому-то не потерять волосы, как я...