Thymeleafでif-elseを行う方法は?


132

簡単な操作を行うための最善の方法は何だif- elseThymeleafに?

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>

JSTLで。

私がこれまでに考えたこと:

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

potentially_complex_expression2回評価したくありません。そのため、ローカル変数を導入しましたcondition。それでも、th:if="${condition}との両方を使用するのは好きではありませんth:unless="${condition}"

LETの発言:重要なことは、私は2個の異なるHTMLタグを使用することであるh2span

それを達成するためのより良い方法を提案できますか?

回答:


208

Thymeleafには<c:choose>andと同等のものがあります。Thymeleaf2.0で導入され<c:when>th:switchおよびth:case属性。

*デフォルトのケースで使用すると、期待どおりに機能します。

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

構文(またはThymeleafチュートリアル)の簡単な説明については、こちらを参照してください。

免責事項:StackOverflowルールで要求されるように、私はThymeleafの作成者です。


わかりましたが、顧客のタイプ(つまり、匿名またはログイン)に基づいてjavascriptを呼び出す方法...
Lucky

1
特に中に「Thymeleafを使用する」のチュートリアルでセクションを「JavaScriptをインライン化」、「インライン化テキスト」の章を参照してくださいthymeleaf.org/documentation.html
ダニエル・フェルナンデス

そして、どうすればit:ator.index値をオンにすることができますか?値が5未満の場合に一連のケースを実行し、値が5より大きい場合はデフォルトのケースに切り替えたい
Loser Coder

@DanielFernández:stackoverflow.com/questions/48499723/…で私を助けてくれませんか。質問に直接タグを付けることができませんでした。本当に立ち往生。
桟橋

98

このコードを試して、顧客がログインしているか匿名であるかを確認しました。私が使ったのth:ifth:unless条件式を。それを行うためのかなり単純な方法。

<!-- 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
これはOPの質問の答えにはなりません。これは、複雑な式の重複を回避するためでした。そして、他のソリューションと同様に、これはThymeleafの主要なセールスポイントである「自然なテンプレート」のアイデアを壊します。自分でどうすればよいかわからないが、誰かが答えを持っている場合に備えて指摘したかっただけだ。
スティーブンハリソン

@LuckyこれによりエラーEL1007E:(pos 0)が発生します:プロパティまたはフィールド 'Status'が見つかりません
Jesse

@Jackie上記の例では、customerはオブジェクトであり、anonymousはCustomerクラスのブールフィールドです。オブジェクトがnullでなく、フィールド名が正しいことを確認してください。
ラッキー

25

ダニエルフェルナンデスに加えて、セキュリティに関する私の例を共有したいと思います。

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

以下は、thymeleafテンプレートコードの「true / false」結果を生成する「認証」と「承認」ユーティリティオブジェクトが混在する複雑な式です。

'authentication'および 'authorization'ユーティリティオブジェクトは、thymeleafエクストラのspringsecurity3ライブラリからのものです。「authentication」オブジェクトが使用できない場合、またはauthorization.expression( 'isAuthenticated()')が「false」と評価された場合、式は$ {false}を返し、それ以外の場合は$ {true}を返します。


19

使用できます

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

例:

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

これは、同じ質問をする新しい人々に役立ちます。


11

別の解決策-ローカル変数を使用できます:

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

ローカル変数の詳細:http :
//www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#local-variables


コードに「=」記号を追加したと思います。もう一度確認して、正しければ修正してください。
ラッキー

私の意見では、コードは大丈夫です。余分な「=」記号の意味がわかりません。
jareks

ええ、コードは大丈夫です。申し訳ありませんが、私はそれを混同th:each式が有している場合:代わりに=
ラッキー

しかし、この答えは私の解決策に非常に近いものです。th:with式を実行している間、私には冗長に思えます。基本的に、このソリューションはth:ifおよびth:unless条件ステートメントを使用します。
幸運な

冗長ではないと思います。th:ifとth:unlessのみを使用する場合、複雑な式は2回実行されます...
jareks

9

より単純な場合(htmlタグが同じ場合):

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

この表現に「Hello」と「Something other」の翻訳を追加する方法を知っていますか?
ローラ

@Lauraプロパティファイルの場所に基づいて、国際化を使用してさまざまな言語の翻訳を読み込むことができます。looksok.wordpress.com/tag/internationalization、marcelustrojahn.com / 2016/12 / …を
ラッキー

7

別の解決策は、単にnot反対の否定を得るために使用することです:

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

ドキュメントで説明されているように、を使用するのと同じですth:unless。他の答えが説明したように:

また、OGNL式内でnotを使用する代わりに、前の例で使用できth:ifた逆の属性があります。th:unless

を使用することnotもできますが、IMHOを使用th:unlessすると、条件を否定するよりも読みやすくなります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>

ここに画像の説明を入力してください


1

th:switchとして使用if-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>

th:switchとして使用switch

<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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.