Thymeleaf - Интерполяция строки в условное предложение th: styleappend - PullRequest
0 голосов
/ 19 июня 2020

В следующем сообщении SO описывается, как условно добавить буквальный атрибут стиля CSS к атрибуту стиля элемента. (Под буквальным обозначением я подразумеваю кодированный непосредственно в шаблоне TL.) В приведенном здесь примере выбирается, какой из двух цветов использовать на основе предиката.

Thymeleaf - Как применить два (или более) стили, основанные на взаимоисключающих условиях

Я бы хотел go сделать еще один шаг и интерполировать условно добавленное значение атрибута стиля. Возможно ли это?

Вот несколько попыток, которые не сработали:

<span th:styleappend="${option.color != null} ? 'background:${option.color}'">...</span>

Не удалось, потому что интерполяция не происходит в части, заключенной в одинарные кавычки, поэтому '$ {option.color } 'дословно выводится в HTML.

<span th:styleappend="${option.color != null} ? 'background:'${option.color}">...</span>

Ошибка, так как это недопустимое выражение TL.

<span th:styleappend="${option.color != null} ? background:${option.color}">...</span>

Ошибка, потому что: принимается как часть выражение, а не часть вывода.

<span th:styleappend="${option.color == null} ? '' : 'background:'${option.color}}">...</span>

Попытка взлома. Ошибка из-за недопустимого выражения.

Я мог бы обойти это, используя th:if / th:unless и включая (или нет) стиль в двух ветвях. Я стараюсь избежать этого, поскольку это не единственный такой атрибут, и я хочу избежать взрывного роста комбинаций. Я знаю, что правильность включения атрибута цвета (строка #rrggbb) в параметр вызывает сомнения. Но вопрос, однако, является общим.

(Приносим извинения заранее, если это новый ie вопрос, но в результате нескольких поисков ответа не последовало, и я не могу найти его в документации.)

1 Ответ

0 голосов
/ 19 июня 2020

Помогает знание оператора +. : -)

Это работает:

<span th:styleappend="${option.color} ? 'background: ' + ${option.color} : 'background: none'">...</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...