sử dụng thuộc tính data- * với thymeleaf

125

Tôi có thể đặt thuộc tính data- * với thymeleaf không?

Như tôi đã hiểu từ tài liệu về thymeleaf tôi đã thử:

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

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

html thymeleaf

— Alexandru Severin
nguồn

7

Đây là một lỗi, đã được sửa cho Thymeleaf 3.0 . Câu hỏi này chỉ có liên quan cho phiên bản 3.0. Đối với những người mới hơn th:data-el_idsẽ làm việc.

— GabiM

219

Có, th:attrđể giải cứu tài liệu Thymeleaf - Đặt giá trị thuộc tính .

Đối với kịch bản của bạn, điều này sẽ thực hiện công việc:

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

Các quy tắc XML không cho phép bạn đặt một thuộc tính hai lần trong một thẻ, vì vậy bạn không thể có nhiều hơn một thuộc tính th:attr thuộc tính trong cùng một thành phần.

Lưu ý: Nếu bạn muốn thêm một thuộc tính đó, hãy phân tách các thuộc tính khác nhau bằng dấu phẩy:

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

— Aldrian
nguồn

54

Chỉ cần một lưu ý cho độc giả trong tương lai, bạn không thể có nhiều hơn một: attr trong cùng một yếu tố, vì vậy chỉ cần sử dụng một và tách các thuộc tính khác nhau bằng dấu phẩy:th:attr="data-id=${element.getId()},data-name=${element.getName()}"

— AntonioOtero

5

Nếu bạn cần bao gồm một biến như là một phần của chuỗi, bạn cần thực hiện điều này:th:attr="data-id='some-text'+${element.getId()}+'some-other-text',data-name=${element.getName()}"

— kabadisha

1

Nhận xét của @AntonioOtero nên là một phần của câu trả lời.

— Don Cheadle

Tôi muốn xử lý thuộc tính sẽ không bị hạn chế đối với một số thuộc tính nhất định mà thường được xử lý. Có ai nghe nói rằng nó sẽ là tính năng? (Đổ lỗi cho tôi, tôi chưa kiểm tra phiên bản 3 ;-)

— Dirk Schumacher

11

Hoặc bạn có thể sử dụng phương ngữ Thymeleaf này https://github.com/mxab/thymeleaf-extras-data-attribution và bạn sẽ có thể làm được

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

— David Ber
nguồn

7

Với Thymeleaf 3.0, Bộ xử lý thuộc tính mặc định có thể được sử dụng cho bất kỳ loại thuộc tính tùy chỉnh nào, ví dụ như th:data-el_id=""trở thành data-el_id="", th:ng-app=""trở thành ng-app="", v.v. Không cần phương ngữ thuộc tính dữ liệu yêu quý nữa.

Giải pháp này tôi thích, nếu tôi muốn sử dụng json làm giá trị, thay vì:

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

Bạn có thể sử dụng (kết hợp với thay thế bằng chữ ):

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

Cập nhật: Nếu bạn không thích thkhông gian tên, bạn cũng có thể sử dụng tên thuộc tính và thuộc tính thân thiện với HTML5 như data-th-data-foobar="".

Nếu ai đó quan tâm, các thử nghiệm công cụ mẫu có liên quan có thể được tìm thấy ở đây: Các thử nghiệm cho Bộ xử lý thuộc tính mặc định

— RiZKiT
nguồn