Использование пользовательского атрибута данных html в Thymeleaf/Springboot

Я использую библиотеку Javascript для создания карусели, и у нее есть настраиваемый атрибут data-flickity. Когда я использую последнюю сборку Springboot SNAPSHOT (2.0.0.BUILD-SNAPSHOT), компонент работает нормально без каких-либо изменений в коде, но когда я откатываюсь до последней версии RELEASE (1.5.2.RELEASE), компонент полностью ломается. Мне нужно запустить это на 1.5.2. У меня такое ощущение, что это связано с пользовательским атрибутом данных:

<div class="gallery" data-flickity='{ "cellAlign": "left", "contain": true }'>

Итак, я попробовал это:

<div class="gallery" th:atrr="data-flickity='{ "cellAlign": "left", "contain": true }'">

Даже если в конечном итоге это не проблема, как мне правильно отформатировать приведенное выше в Thymeleaf?


spring-boot-actuator javascript spring-mvc html thymeleaf
person Martin Erlic    schedule 13.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

  1. Если вам не нужно делать ничего «динамического» для атрибута, вы должны иметь возможность включить его непосредственно в свой документ, как в свой первый фрагмент кода, даже если это нестандартный атрибут или атрибут с префиксом data-. Если это не работает для вас, по-видимому, есть что-то еще, вызывающее ту проблему, которую вы видите.

  2. В вашем втором блоке кода есть опечатка: td:attr - это то, как создается общий атрибут любого типа в Thymeleaf, но вместо этого у вас есть td:atrr. Я предполагаю, что это просто ошибка транскрипции в вашем сообщении, но опечатки — одна из тех вещей, к которым компьютеры весьма придирчивы.

  3. Во втором блоке кода (это то, что вам нужно, особенно если вам нужно динамически указать содержимое пользовательского атрибута) есть три уровня цитирования: во внешнем HTML, в синтаксисе Thymeleaf th:attr, а затем в цитировании внутри значение, которое вы там ставите. Большинство языков (включая HTML/XML, Thymeleaf и JSON) поддерживают взаимозаменяемое использование двойных или одинарных кавычек, чтобы помочь с этими уровнями вложенности, но когда у вас есть три уровня, это может быть немного сложнее. Вам нужно избежать анализа внутренних двойных кавычек внешним уровнем, и, поскольку вы используете HTML/XML на внешнем уровне, вы хотите использовать его метод экранирования кавычек, оставив что-то вроде этого:

    <div class="gallery" th:attr="data-flickity='{ &quot;cellAlign&quot;: &quot;left&quot;, &quot;contain&quot;: true }'">

    Или, в качестве альтернативы, вы можете указать второй уровень вместо третьего и использовать одинарные кавычки на внешнем уровне:

    <div class="gallery" th:attr='data-flickity=&apos;{ "cellAlign": "left", "contain": true }&apos;'>
person Community    schedule 14.04.2017