Учебник Thymeleaf: Глава 20. Приложение C: Синтаксис селектора разметки

Оглавление

20 Приложение C: Синтаксис селектора разметки

Селекторы разметки Thymeleaf напрямую заимствованы из библиотеки парсера Thymeleaf: AttoParser.

Синтаксис для этих селекторов имеет большое сходство с синтаксисом селекторов в XPath, CSS и jQuery, что делает их удобными для большинства пользователей. Вы можете взглянуть на полную ссылку на синтаксис в документации AttoParser.

Например, следующий селектор будет выбирать каждый <div> с содержимым класса в каждой позиции внутри разметки (обратите внимание, что это не так лаконично, как могло бы быть, читайте далее, чтобы знать почему):

<div th:insert="mytemplate :: //div[@class='content']">...</div>

Основной синтаксис включает:

• /x означает прямые дочерние элементы текущего узла с именем x
• //x означает дочерние элементы текущего узла с именем x на любой глубине
• x[@z=«v»] означает элементы с именем x и атрибутом z со значением «v»
• x[@z1=«v1» and @z2=«v2»] означает элементы с именем x и атрибутами z1 и z2 со значениями «v1» и «v2» соответственно
• x[i] означает элемент с именем x, расположенный в числе i среди его братьев и сестер
• x[@z=«v»][i] означает элементы с именем x, атрибут z со значением «v» и помещены в число i среди его братьев и сестер, которые также соответствуют этому условию

Но можно использовать более сжатый синтаксис:

• x точно эквивалентен //x (поиск элемента с именем или ссылкой x на любом уровне глубины, ссылка — атрибут th:ref или th:fragment)
• Селекторы также разрешены без имени элемента / ссылки, если они содержат спецификацию аргументов. Таким образом, [@class='oneclass'] является допустимым селектором, который ищет любые элементы (теги) с атрибутом класса со значением "oneclass"

Расширенные функции выбора атрибутов:

• Кроме = (равно), действуют и другие операторы сравнения: != (Не равно), ^= (начинается с) и $= (заканчивается). Например: x[@class^='section'] означает элементы с именем x и значение класса атрибута, которое начинается с раздела
• Атрибуты могут быть указаны как начиная с @ (стиль XPath), так и без (jQuery-style). Итак, x[z='v'] эквивалентно x[@z='v']
• Модификаторы с несколькими атрибутами можно объединить как с and (в стиле XPath), так и путем объединения нескольких модификаторов (стиль jQuery). Таким образом, x[@z1='v1' and @z2='v2'] фактически эквивалентно x[@z1='v1'][@z2='v2'] (а также к x[z1='v1'][z2='v2'])

Прямые селектора типа jQuery:

• x.oneclass эквивалентен x[class='oneclass']
• .oneclass эквивалентен [class='oneclass']
• x#oneid эквивалентен x[id='oneid']
• #oneid эквивалентен [id='oneid']
• x%oneref означает теги <x>, которые имеют атрибут th:ref=«oneref» или th:fragment=«oneref»
• Прямые селектора и селектора атрибутов могут быть смешаны: a.external[@href^='https']

Таким образом, выражение Markup Selector выше:

<div th:insert="mytemplate :: //div[@class='content']">...</div>

Может быть написано как:

<div th:insert="mytemplate :: div.content">...</div>

Изучив другой пример, выполните следующие действия:

<div th:replace="mytemplate :: myfrag">...</div>

Будет искать фрагмент фрагмента th:fragment=«myfrag» (или th:ref ссылки). Но также искали бы теги с именем myfrag, если бы они существовали (чего нет в HTML).

Обратите внимание на разницу с:

<div th:replace="mytemplate :: .myfrag">...</div>

… который фактически будет искать любые элементы с class=«myfrag», не заботясь о сигнатурах: th:fragment (или th:ref).

Многозначное сопоставление классов

Селекторы разметки понимают, что атрибут класса является многозначным (multivalued), и поэтому разрешает применение селекторов по этому атрибуту, даже если элемент имеет несколько значений класса.

Например, div.two будет соответствовать

<div class="one two three" />