Kelas CSS Bersyarat di Thymeleaf

1. Gambaran keseluruhan

Dalam tutorial ringkas ini, kami akan mempelajari beberapa cara yang berbeza untuk menambahkan kelas CSS di Thymeleaf secara bersyarat.

Sekiranya anda tidak biasa dengan Thymeleaf, kami sarankan untuk memeriksa pengenalan kami kepadanya.

2. Menggunakan th: jika

Mari kita anggap bahawa tujuan kita adalah untuk menghasilkan kelasnya ditentukan oleh pelayan:

 I have two classes: "base" and either "condition-true" or "condition-false" depending on a server-side condition. 

Sebelum HTML ini disajikan, kami memerlukan cara yang baik untuk pelayan menilai suatu keadaan dan sama ada termasuk class -true class atau condition-false class, dan juga kelas dasar .

Semasa membuat templat HTML, adalah biasa untuk menambahkan logik bersyarat untuk tingkah laku dinamik.

Pertama, mari gunakan th: if untuk menunjukkan bentuk logik bersyarat yang paling mudah:

 This HTML is duplicated. We probably want a better solution.   This HTML is duplicated. We probably want a better solution. 

Kita dapat melihat di sini bahawa ini secara logik akan menyebabkan kelas CSS yang betul dilampirkan ke elemen HTML kita, tetapi penyelesaian ini melanggar prinsip DRY kerana memerlukan penduaan keseluruhan blok kod.

Menggunakan th: jika boleh berguna dalam beberapa kes, tetapi kita harus mencari cara lain untuk menambahkan kelas CSS secara dinamik.

3. Menggunakan th: attr

Thymeleaf memberi kami atribut yang akan membolehkan kita menentukan atribut lain, yang disebut th: attr .

Mari gunakan untuk menyelesaikan masalah kami:

 This HTML is consolidated, which is good, but the Thymeleaf attribute still has some redundancy in it. 

Anda mungkin menyedari bahawa kelas asas masih diduplikasi. Juga, ada atribut Thymeleaf yang lebih spesifik yang dapat kita gunakan ketika menentukan kelas.

4. Menggunakan th: kelas

Yang ke: Kelas atribut adalah jalan pintas untuk ke: attr = "class = ..." jadi mari kita menggunakannya bukan, bersama-sama dengan memisahkan asas kelas daripada hasil penyakit ini:

 The base CSS class still has to be appended with String concatenation. We can do a little bit better. 

Penyelesaian ini cukup bagus kerana memenuhi keperluan kita dan KERING. Namun, masih ada lagi atribut Thymeleaf yang boleh kita manfaatkan.

5. Menggunakan th: classappend

Bukankah senang untuk melepaskan sepenuhnya kelas asas kita dari logik bersyarat? Kami dapat menentukan kelas asas kami secara statik dan mengurangkan logik bersyarat kepada bahagian yang berkaitan:

 This HTML is consolidated, and the conditional class is appended separately from the static base class. 

6. Kesimpulannya

Dengan setiap lelaran kod Thymeleaf kami, kami belajar tentang teknik bersyarat yang berguna yang mungkin berguna kemudian. Pada akhirnya, kami mendapati bahawa menggunakan th: classappend memberikan kami kombinasi terbaik dari kod KERING dan pemisahan keprihatinan sambil juga memenuhi matlamat kami.

Semua contoh ini dapat dilihat dalam projek Thymeleaf yang berfungsi di GitHub.