menggunakan atribut data- * dengan thymeleaf

125

Dapatkah saya menyetel atribut data- * dengan timeleaf?

Seperti yang saya pahami dari dokumentasi thymeleaf saya mencoba:

<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->

<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->

html thymeleaf

— Alexandru Severin
sumber

7

Ini adalah bug, diperbaiki untuk Thymeleaf 3.0 . Pertanyaan ini hanya relevan untuk versi sebelum 3.0. Untuk yang lebih baru th:data-el_idakan berfungsi.

— GabiM

219

Ya, th:attruntuk menyelamatkan dokumentasi Thymeleaf - Mengatur nilai atribut .

Untuk skenario Anda, ini harus dilakukan:

<div th:attr="data-el_id=${element.getId()}">

Aturan XML tidak mengizinkan Anda menyetel atribut dua kali dalam tag, jadi Anda tidak boleh memiliki lebih dari satu th:attrdalam elemen yang sama.

Catatan: Jika Anda menginginkan lebih dari satu atribut, pisahkan atribut yang berbeda dengan koma:

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌ame()}">

— Aldrian
sumber

54

Sekadar catatan untuk pembaca selanjutnya, Anda tidak dapat memiliki lebih dari satu atr dalam elemen yang sama jadi cukup gunakan satu dan pisahkan atribut yang berbeda dengan koma:th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— AntonioOtero

5

Jika Anda perlu memasukkan variabel sebagai bagian dari string, Anda perlu melakukan ini:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

Komentar @AntonioOtero harus menjadi bagian dari jawaban.

— Don Cheadle

Saya berharap pemrosesan atribut tidak akan dibatasi pada atribut tertentu, melainkan ditangani secara umum. Adakah yang pernah mendengar bahwa itu akan menjadi fitur? (Salahkan saya, saya belum memeriksa versi 3 ;-)

— Dirk Schumacher

11

Atau Anda dapat menggunakan dialek Thymeleaf ini https://github.com/mxab/thymeleaf-extras-data-attribute dan Anda akan dapat melakukannya

<div data:el_id="${element.getId()}">

— Adrian Ber
sumber

7

Dengan Thymeleaf 3.0 ada Prosesor Atribut Default yang dapat digunakan untuk segala jenis atribut khusus, misalnya th:data-el_id=""menjadi data-el_id="", th:ng-app=""menjadi , ng-app=""dan seterusnya. Tidak perlu lagi dialek atribut data yang dicintai.

Solusi ini saya lebih suka, jika saya ingin menggunakan json sebagai nilainya, daripada:

th:attr="data-foobar='{&quot;foo&quot:'+${bar}+'}'"

Anda dapat menggunakan (dalam kombinasi dengan substitusi literal ):

th:data-foobar='|{"foo":${bar}}|'

Pembaruan: Jika Anda tidak menyukai thnamespace, Anda juga dapat menggunakan atribut ramah HTML5 dan nama elemen seperti data-th-data-foobar="".

Jika seseorang tertarik, tes mesin template terkait dapat ditemukan di sini: Tes untuk Prosesor Atribut Default

— RiZKiT
sumber