Bagaimana caranya kalau-ada di Thymeleaf?


132

Apa cara terbaik untuk melakukan yang sederhana if- elsedi Thymeleaf?

Saya ingin mencapai efek yang sama di Thymeleaf

<c:choose>
  <c:when test="${potentially_complex_expression}">
     <h2>Hello!</h2>
  </c:when>
  <c:otherwise>
     <span class="xxx">Something else</span>
  </c:otherwise>
</c:choose>

dalam JSTL.

Apa yang saya pikirkan sejauh ini:

<div th:with="condition=${potentially_complex_expression}" th:remove="tag">
    <h2 th:if="${condition}">Hello!</h2>
    <span th:unless="${condition}" class="xxx">Something else</span>
</div>

Saya tidak ingin mengevaluasi potentially_complex_expressiondua kali. Itu sebabnya saya memperkenalkan variabel lokal condition. Tetap saya tidak suka menggunakan keduanya th:if="${condition}dan th:unless="${condition}".

Yang penting adalah saya menggunakan dua tag HTML yang berbeda: katakanlah h2dan span.

Bisakah Anda menyarankan cara yang lebih baik untuk mencapainya?

Jawaban:


208

Thymeleaf memiliki kesamaan dengan <c:choose>dan <c:when>: atribut th:switchdan th:casediperkenalkan di Thymeleaf 2.0.

Mereka bekerja seperti yang Anda harapkan, menggunakan *untuk kasus default:

<div th:switch="${user.role}"> 
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p> 
</div>

Lihat ini untuk penjelasan singkat tentang sintaks (atau tutorial Thymeleaf).

Penafian : Seperti yang dipersyaratkan oleh aturan StackOverflow, saya penulis Thymeleaf.


ok tapi..bagaimana saya memohon javascript berdasarkan jenis pelanggan (yaitu anonim atau login) ...
Lucky

1
Lihat bab tentang "Text inlining", khususnya bagian "inlining JavaScript" di tutorial "Using Thymeleaf" di thymeleaf.org/documentation.html
Daniel Fernández

Dan bagaimana saya bisa melakukan ini: aktifkan nilai iterator.index? Saya ingin melakukan satu set case ketika nilainya <5, dan beralih ke case default jika nilainya> 5
Loser Coder

@ DanielFernández: bisakah Anda membantu saya dengan stackoverflow.com/questions/48499723/… . Saya tidak dapat memberi tag Anda pada pertanyaan secara langsung. Sangat macet.
dermaga

98

Saya mencoba kode ini untuk mengetahui apakah pelanggan masuk atau anonim. Saya menggunakanth:if dan th:unlessekspresi kondisional. Cara yang cukup sederhana untuk melakukannya.

<!-- IF CUSTOMER IS ANONYMOUS -->
<div th:if="${customer.anonymous}">
   <div>Welcome, Guest</div>
</div>
<!-- ELSE -->
<div th:unless="${customer.anonymous}">
   <div th:text=" 'Hi,' + ${customer.name}">Hi, User</div>
</div>

5
Ini tidak menjawab pertanyaan OP karena itu tentang menghindari duplikasi ekspresi kompleks. Dan seperti solusi lain, ini mematahkan gagasan "templat alami", yang merupakan titik penjualan utama Thymeleaf. Tidak yakin harus berbuat apa tentang itu sendiri, tetapi hanya ingin menunjukkannya kalau-kalau ada yang punya jawaban.
Stephen Harrison

@Beruntung ini memberiku kesalahan EL1007E: (pos 0): Properti atau bidang 'Status' tidak dapat ditemukan
Jesse

@ Jackie Dalam contoh di atas pelanggan adalah objek dan anonim adalah bidang boolean di kelas Pelanggan. Pastikan objek Anda tidak nol dan nama bidang sudah benar.
Lucky

25

Saya ingin membagikan contoh saya terkait keamanan selain Daniel Fernández.

<div th:switch="${#authentication}? ${#authorization.expression('isAuthenticated()')} : ${false}">
    <span th:case="${false}">User is not logged in</span>
    <span th:case="${true}">Logged in user</span>
    <span th:case="*">Should never happen, but who knows...</span>
</div>

Berikut adalah ekspresi kompleks dengan objek utilitas 'otentikasi' dan 'otorisasi' campuran yang menghasilkan hasil 'benar / salah' untuk kode templat thymeleaf.

Objek utilitas 'otentikasi' dan 'otorisasi' berasal dari perpustakaan thymeleaf extras springsecurity3 . Ketika objek 'otentikasi' tidak tersedia ATAU otorisasi.ekspresi ('isAuthenticated ()') mengevaluasi menjadi 'false', ekspresi mengembalikan $ {false}, jika tidak $ {true}.


19

Kamu bisa memakai

If-then-else:  (if) ? (then) : (else)

Contoh:

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

Ini bisa bermanfaat bagi orang baru yang mengajukan pertanyaan yang sama.


11

Solusi lain - Anda dapat menggunakan variabel lokal:

<div th:with="expr_result = ${potentially_complex_expression}">
    <div th:if="${expr_result}">
        <h2>Hello!</h2>
    </div>
    <div th:unless="${expr_result}">
        <span class="xxx">Something else</span>
    </div>
</div>

Lebih lanjut tentang variabel lokal:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#local-variables


Saya pikir Anda telah menambahkan "" tanda masuk tambahan dalam kode Anda. Harap verifikasi lagi dan perbaiki jika saya benar.
Lucky

Dalam kode opini saya ok. Saya tidak tahu tanda '=' ekstra mana yang Anda maksud.
jareks

Ya kodenya ok. Maaf, saya bingung dengan di th:eachmana ekspresi itu :bukannya=
Lucky

Tetapi jawaban ini sangat dekat dengan solusi saya. Saat melakukan th: dengan ekspresi sepertinya berlebihan bagiku. Pada dasarnya solusi ini menggunakan th: if dan th: kecuali pernyataan kondisional.
Lucky

Saya pikir itu tidak berlebihan. Jika Anda hanya menggunakan th: if dan th: kecuali ekspresi kompleks akan dieksekusi dua kali ...
jareks

9

Dalam kasus yang lebih sederhana (ketika tag html sama):

<h2 th:text="${potentially_complex_expression} ? 'Hello' : 'Something else'">/h2>

Apakah Anda tahu cara menambahkan terjemahan untuk 'Hello' dan 'Something else' dalam ungkapan ini?
Laura

@Laura Anda dapat menggunakan internasionalisasi dan memuat terjemahan bahasa yang berbeda berdasarkan lokasi dari file properti. Lihat looksok.wordpress.com/tag/internationalization , marcelustrojahn.com/2016/12/…
Lucky

7

Solusi lain hanya menggunakan notuntuk mendapatkan negasi yang berlawanan:

<h2 th:if="${potentially_complex_expression}">Hello!</h2>
<span class="xxx" th:if="${not potentially_complex_expression}">Something else</span>

Seperti dijelaskan dalam dokumentasi , itu sama dengan menggunakan th:unless. Seperti jawaban lain telah jelaskan:

Juga, th:ifmemiliki atribut terbalik th:unless,, yang bisa kita gunakan dalam contoh sebelumnya alih-alih menggunakan tidak di dalam ekspresi OGNL

Menggunakan notjuga berfungsi, tetapi IMHO lebih mudah digunakan th:unlessdaripada meniadakan kondisi dengan not.


2
<div th:switch="${user.role}"> 
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p> 
</div>


<div th:with="condition=${potentially_complex_expression}" th:remove="tag">
<h2 th:if="${condition}">Hello!</h2>
<span th:unless="${condition}" class="xxx">Something else</span>
</div>

1
<div style="width:100%">
<span th:each="i : ${#numbers.sequence(1, 3)}">
<span th:if="${i == curpage}">
<a href="/listEmployee/${i}" class="btn btn-success custom-width" th:text="${i}"></a
</span>
<span th:unless="${i == curpage}">
<a href="/listEmployee/${i}" class="btn btn-danger custom-width" th:text="${i}"></a> 
</span>
</span>
</div>

masukkan deskripsi gambar di sini


1

Gunakan th:switchsebagaiif-else

<span th:switch="${isThisTrue}">
  <i th:case="true" class="fas fa-check green-text"></i>
  <i th:case="false" class="fas fa-times red-text"></i>
</span>

Gunakan th:switchsebagaiswitch

<span th:switch="${fruit}">
  <i th:case="Apple" class="fas fa-check red-text"></i>
  <i th:case="Orange" class="fas fa-times orange-text"></i>
  <i th:case="*" class="fas fa-times yellow-text"></i>
</span>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.