Wie mache ich es, wenn sonst in Thymeleaf?

132

Was ist der beste Weg, um ein einfaches zu machen if- elsein Thymeleaf?

Ich möchte in Thymeleaf den gleichen Effekt erzielen wie

<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>

in JSTL.

Was ich bisher gedacht habe:

<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>

Ich möchte nicht potentially_complex_expressionzweimal bewerten . Deshalb habe ich die lokale Variable eingeführt condition. Trotzdem benutze ich nicht gerne beide th:if="${condition}und th:unless="${condition}".

Eine wichtige Sache ist, dass ich zwei verschiedene HTML-Tags verwende: Sagen wir h2und span.

Können Sie einen besseren Weg vorschlagen, um dies zu erreichen?

Maciej Ziarko
quelle

Antworten:

208

Thymeleaf hat ein Äquivalent zu <c:choose>und <c:when>: den in Thymeleaf 2.0 eingeführten Attributen th:switchund th:case.

Sie funktionieren wie erwartet und verwenden *für den Standardfall:

<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>

Sehen Sie dies für eine kurze Erklärung der Syntax (oder die Thymeleaf Tutorials).

Haftungsausschluss : Gemäß den StackOverflow-Regeln bin ich der Autor von Thymeleaf.

Daniel Fernández
quelle
ok aber..wie rufe ich ein Javascript auf, das auf dem Kundentyp basiert (dh anonym oder eingeloggt) ...
Lucky
1
Siehe das Kapitel "Text Inlining", insbesondere den Abschnitt "JavaScript Inlining" im Tutorial "Using Thymeleaf" in thymeleaf.org/documentation.html
Daniel Fernández
Und wie kann ich das tun: einen iterator.index-Wert einschalten? Ich möchte eine Reihe von Fällen ausführen, wenn der Wert <5 ist, und zum Standardfall wechseln, wenn der Wert> 5 ist
Loser Coder
@ DanielFernández: Können Sie mir helfen mit bitte stackoverflow.com/questions/48499723/... . Ich konnte Sie nicht direkt auf die Frage hinweisen. Wirklich stecken.
Steg
98

Ich habe diesen Code ausprobiert, um herauszufinden, ob ein Kunde angemeldet oder anonym ist. Ich habe die th:ifund th:unlessbedingten Ausdrücke verwendet. Ziemlich einfacher Weg, es zu tun.

<!-- 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>
Glücklich
quelle
5
Dies beantwortet die Frage des OP nicht, da es darum ging, das Duplizieren komplexer Ausdrücke zu vermeiden. Und wie bei anderen Lösungen bricht dies die Idee der "natürlichen Vorlagen", die ein wichtiges Verkaufsargument von Thymeleaf ist. Ich bin mir nicht sicher, was ich selbst tun soll, wollte aber nur darauf hinweisen, falls jemand eine Antwort hat.
Stephen Harrison
@ Glücklicherweise gibt mir dies einen Fehler EL1007E: (Pos 0): Eigenschaft oder Feld 'Status' kann nicht gefunden werden
Jesse
@Jackie Im obigen Beispiel ist customer ein Objekt und anonym ist ein boolesches Feld in der Customer-Klasse. Stellen Sie sicher, dass Ihr Objekt nicht null ist und der Feldname korrekt ist.
Glücklicher
25

Ich möchte neben Daniel Fernández mein Beispiel in Bezug auf Sicherheit weitergeben.

<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>

Hier ist ein komplexer Ausdruck mit gemischten Dienstprogrammobjekten "Authentifizierung" und "Autorisierung", der ein "wahr / falsch" -Ergebnis für den Thymeleaf-Vorlagencode erzeugt.

Die Dienstprogrammobjekte "Authentifizierung" und "Autorisierung" stammen aus der springsecurity3-Bibliothek von thymeleaf extras . Wenn das Objekt 'Authentifizierung' nicht verfügbar ist ODER authorisation.expression ('isAuthenticated ()') als 'false' ausgewertet wird, gibt expression $ {false} zurück, andernfalls $ {true}.

langweiliger
quelle
19

Sie können verwenden

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

Beispiel:

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

Es könnte für die neuen Leute nützlich sein, die die gleiche Frage stellen.

Jad B.
quelle
11

Eine andere Lösung - Sie können lokale Variablen verwenden:

<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>

Weitere Informationen zu lokalen Variablen:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#local-variables

Jareks
quelle
Ich denke, Sie haben Ihrem Code ein zusätzliches "=" - Zeichen hinzugefügt. Bitte überprüfen Sie es erneut und korrigieren Sie es, wenn ich Recht habe.
Glücklicher
Meiner Meinung nach ist der Code in Ordnung. Ich weiß nicht, welches zusätzliche '=' Zeichen Sie meinen.
Jareks
Ja, der Code ist in Ordnung. Entschuldigung, ich habe es mit dem verwechselt, th:eachwo der Ausdruck :statt=
Lucky
Aber diese Antwort kommt meiner Lösung sehr nahe. Während ich das th mache: mit Ausdruck erscheint mir überflüssig. Grundsätzlich verwendet diese Lösung th: if und th:, sofern keine bedingten Anweisungen vorliegen.
Glücklicher
Ich denke, es ist nicht überflüssig. Wenn Sie nur th: wenn und th: es sei denn , komplexer Ausdruck zweimal ausgeführt werden würde ...
jareks
9

Im einfacheren Fall (wenn HTML-Tags identisch sind):

<h2 th:text="${potentially_complex_expression} ? 'Hello' : 'Something else'">/h2>
Grigory Kislin
quelle
Wissen Sie, wie Sie in diesem Ausdruck Übersetzungen für "Hallo" und "Etwas anderes" hinzufügen können?
Laura
@Laura Sie können die Internationalisierung verwenden und verschiedene Sprachübersetzungen basierend auf dem Speicherort aus der Eigenschaftendatei laden. Siehe lookok.wordpress.com/tag/internationalization , marcelustrojahn.com/2016/12/…
Lucky
7

Eine andere Lösung besteht darin, nur notdie entgegengesetzte Negation zu erhalten:

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

Wie in der Dokumentation erläutert , entspricht dies der Verwendung th:unless. Wie andere Antworten erklärt haben:

Hat th:ifauch ein inverses Attribut, th:unlessdas wir im vorherigen Beispiel hätten verwenden können, anstatt ein nicht innerhalb des OGNL-Ausdrucks zu verwenden

Die Verwendung notfunktioniert auch, aber meiner Meinung nach ist die Verwendung besser lesbar, als th:unlessdie Bedingung mit zu negieren not.

Pau
quelle
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>
Daria Yu
quelle
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>

Geben Sie hier die Bildbeschreibung ein

Tứ Nguyễn Duy
quelle
1

Verwendung th:switchalsif-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>

Verwendung th:switchalsswitch

<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>
Yatendra Goel
quelle