การใช้ data- * attribute กับ thymeleaf

127

ฉันสามารถตั้งค่า data- * attribute ด้วย thymeleaf ได้หรือไม่?

ตามที่ฉันเข้าใจจากเอกสารใบโหระพาฉันพยายาม:

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

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

html thymeleaf

— Alexandru Severin
แหล่งที่มา

7

นี่เป็นข้อผิดพลาดคงที่สำหรับ Thymeleaf 3.0 คำถามนี้เกี่ยวข้องกับเวอร์ชันก่อน 3.0 เท่านั้น สำหรับคนใหม่th:data-el_idจะได้ผล

— GabiM

222

ใช่th:attrเพื่อช่วยเหลือเอกสาร Thymeleaf - การตั้งค่าแอตทริบิวต์

สำหรับสถานการณ์ของคุณสิ่งนี้ควรทำงาน:

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

กฎ XML ไม่อนุญาตให้คุณตั้งค่าแอตทริบิวต์สองครั้งในแท็กดังนั้นคุณจึงมีมากกว่าหนึ่งรายการth:attrในองค์ประกอบเดียวกันไม่ได้

หมายเหตุ: หากคุณต้องการมากกว่าหนึ่งแอตทริบิวต์ให้แยกแอตทริบิวต์ที่แตกต่างกันโดยใช้ลูกน้ำ:

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

— Aldrian
แหล่งที่มา

54

โปรดทราบสำหรับผู้อ่านในอนาคตคุณไม่สามารถมี th: attr มากกว่าหนึ่งรายการในองค์ประกอบเดียวกันได้ดังนั้นให้ใช้เพียงอย่างเดียวและแยกแอตทริบิวต์ที่แตกต่างกันด้วยลูกน้ำ:th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— AntonioOtero

5

หากคุณต้องการรวมตัวแปรเป็นส่วนหนึ่งของสตริงคุณต้องทำสิ่งนี้:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

ความคิดเห็นของ @AntonioOtero ควรเป็นส่วนหนึ่งของคำตอบ

— Don Cheadle

ฉันหวังว่าการประมวลผลแอตทริบิวต์จะไม่ถูก จำกัด เฉพาะบางคุณสมบัติ แต่โดยทั่วไปแล้วจะได้รับการจัดการ มีใครได้ยินว่ามันจะเป็นคุณลักษณะ? (โทษฉันด้วยฉันยังไม่ได้ตรวจสอบเวอร์ชัน 3 เลย ;-)

— Dirk Schumacher

11

หรือคุณสามารถใช้ภาษาไทม์ลีฟhttps://github.com/mxab/thymeleaf-extras-data-attributeและคุณจะสามารถทำได้

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

— เอเดรียนเบอร์
แหล่งที่มา

7

ด้วย Thymeleaf 3.0 มีหน่วยประมวลผลแอตทริบิวต์เริ่มต้นซึ่งสามารถใช้สำหรับชนิดของแอตทริบิวต์ที่กำหนดเองใด ๆ เช่นth:data-el_id=""กลายเป็นdata-el_id="", th:ng-app=""กลายเป็นng-app=""และอื่น ๆ ไม่จำเป็นต้องใช้ภาษาแอตทริบิวต์ข้อมูลอันเป็นที่รักอีกต่อไป

วิธีนี้ฉันชอบถ้าฉันต้องการใช้ jsonเป็นค่าแทนที่จะเป็น:

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

คุณสามารถใช้ (ร่วมกับการแทนที่ตามตัวอักษร ):

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

ปรับปรุง:ถ้าคุณทำไม่ได้เช่นthnamespace คุณยังสามารถใช้HTML5 มิตรแอตทริบิวต์และองค์ประกอบชื่อdata-th-data-foobar=""เหมือน

หากมีผู้สนใจสามารถดูการทดสอบเอนจินเทมเพลตที่เกี่ยวข้องได้ที่นี่: การทดสอบสำหรับตัวประมวลผลแอตทริบิวต์เริ่มต้น

— RiZKiT
แหล่งที่มา