Thymeleafチュートリアル：第13章テンプレートテキストモード

目次

13テンプレートテキストモード

13.1テキスト構文

3種類のThymeleafテンプレートがテキストと見なされます： TEXT 、 JAVASCRIPT、およびCSS 。 これにより、マークアップテンプレートモードであるHTMLおよびXMLと区別されます 。



テキストテンプレートモードとマークアップの主な違いは、テキストテンプレートにロジックを属性として挿入する必要があるタグがないため、他のメカニズムに依存する必要があることです。



これらのメカニズムの最初で最も基本的なものは添付ファイルです。これについては前の章で説明しました。 インライン構文は、テキストテンプレートモードで式の結果を出力する最も簡単な方法です。



手紙を考えてみましょう：

Dear [(${name})], Please find attached the results of the report you requested with name "[(${report.name})]". Sincerely, The Reporter.
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タグがなくても、上記の例は完全で有効なThymeleafテンプレートであり、TEXTモードで実行できます。



ただし、単純な式よりも複雑なロジックを含めるには、新しいタグレス構文が必要です。

 [# th:each="item : ${items}"] - [(${item})] [/]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは実際には、より詳細なバージョンの短縮バージョンです。

 [#th:block th:each="item : ${items}"] - [#th:block th:utext="${item}" /] [/th:block]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この新しい構文は、 <element ...>ではなく[#element ...]として宣言されている要素（つまり、処理されたタグ）に基づいていることに注意してください。 要素は[#element ...]として開かれ、 [/ element]として閉じられ、XMLタグとほぼ同等の方法で/を使用して開いている要素を最小化することにより、スタンドアロンタグを宣言できます： [＃element ... /]



標準的な方言には、これらの要素の1つ（既知のth：block ）のプロセッサのみが含まれていますが、方言を拡張して新しい要素を通常の方法で作成できます。 さらに、 th：ブロック要素（ [#th：block ...] ... [/ th：block] ）は空の文字列（ [＃...] ... [/] ）と省略できるため、上記のブロックは実際には同等です。

 [# th:each="item : ${items}"] - [# th:utext="${item}" /] [/]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、この[＃th：utext = "$ {item}" /]は 、組み込みのエスケープされていない式と同等です。これを使用してコードを減らすことができます。 したがって、上で見た最初のコードを取得します。

 [# th:each="item : ${items}"] - [(${item})] [/]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキスト構文には、要素（開始タグなし）と引用符で囲まれた属性の完全なバランスが必要であることに注意してください-これはHTMLスタイルよりもXMLスタイルです。



テキストメールテンプレートであるTEXTテンプレートのより完全な例を見てみましょう。

 Dear [(${customer.name})], This is the list of our products: [# th:each="prod : ${products}"] - [(${prod.name})]. Price: [(${prod.price})] EUR/kg [/] Thanks, The Thymeleaf Shop
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実行後、結果は次のようになります。

 Dear Mary Ann Blueberry, This is the list of our products: - Apricots. Price: 1.12 EUR/kg - Bananas. Price: 1.78 EUR/kg - Apples. Price: 0.85 EUR/kg - Watermelon. Price: 1.91 EUR/kg Thanks, The Thymeleaf Shop
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、 JAVASCRIPTテンプレートモードのもう1つの例であるgreeter.jsファイルは、テキストテンプレートとして処理され、HTMLページで呼び出されます。 これはHTMLテンプレートの<script>ブロックではありませんが、.jsファイルは単独でテンプレートとして処理されることに注意してください。

 var greeter = function() { var username = [[${session.user.name}]]; [# th:each="salut : ${salutations}"] alert([[${salut}]] + " " + username); [/] };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実行後、この結果は次のようになります。

 var greeter = function() { var username = "Bertrand \"Crunchy\" Pear"; alert("Hello" + " " + username); alert("Ol\u00E1" + " " + username); alert("Hola" + " " + username); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

シールドされたアイテムの属性



他のモード（たとえば、HTMLテンプレートに埋め込まれたテキストモード）で処理できるテンプレートの部分との対話を避けるために、Thymeleaf 3.0はテキスト構文の要素の属性を回避します。 だから：

• TEXTテンプレートモードの属性はシールドされていないHTMLです
• JAVASCRIPTテンプレートモードの属性はJavaScriptでエスケープされません
• CSSテンプレートモードの属性はCSSでエスケープされません

TEXTパターンではこれは素晴らしいことです（＆gt;に注意してください）：

  [# th:if="${120<user.age}"] Congratulations! [/]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、実際のテキストテンプレートでは、この例はあまり意味がありませんが、上記のコードを含むth：inline = "text"ブロックでHTMLテンプレートを処理し、ブラウザーが<userを受け入れないようにすることをお勧めします。プロトタイプとしてファイルを静的に開くときの開始タグの名前の年齢。

13.2拡張性

この構文の利点の1つは、マークアップと同じように拡張できることです。 開発者は、カスタム要素と属性を使用して方言を定義し、それらに接頭辞を適用して（オプション）、テキストテンプレートモードで使用できます。

 [#myorg:dosomething myorg:importantattr="211"]some text[/myorg:dosomething]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

13.3プロトタイプのみのコメントテキストブロック：コードの追加

JAVASCRIPTおよびCSSテンプレートモード（ TEXTでは使用不可 ）を使用すると、特別なコメント構文/*►+...+--------*/の間にコードを含めることができるため 、テンプレートを処理するときにThymeleafがそのようなコードを自動的にコメント解除します。

 var x = 23; /*[+ var msg = "This is a working application"; +]*/ var f = function() { ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のように実行されます。

 var x = 23; var msg = "This is a working application"; var f = function() { ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのコメント内に式を含めることができ、評価されます：

 var x = 23; /*[+ var msg = "Hello, " + [[${session.user.name}]]; +]*/ var f = function() { ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

13.4パーサーレベルのコメントのテキストブロック：コードの削除

同様に、プロトタイプのコメントブロックに関しては、3つのすべてのテキストテンプレートモード（ TEXT 、 JAVASCRIPTおよびCSS ）により、Thymeleafは特別な/ * [-* /および/ *-] * /マーカーの間のコードを削除するように指示できます。

 var x = 23; /*[- */ var msg = "This is shown only when executed statically!"; /* -]*/ var f = function() { ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、TEXTモードの場合：

 ... /*[- Note the user is obtained from the session, which must exist -]*/ Welcome [(${session.user.name})]! ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

13.5 Natural JavaScriptおよびCSSテンプレート

前の章からわかるように、JavaScriptとCSSインライン化は、JavaScript / CSSコメントにインライン式を含める機能を提供します。例：

 ... var username = /*[[${session.user.name}]]*/ "Sebastian Lychee"; ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

...これは有効なJavaScriptであり、実行可能コードは次のようになります。

 ... var username = "John Apricot"; ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コメント内にインライン式を含めるための同じトリックを、実際にテキストモード構文全体に使用できます。

  /*[# th:if="${user.admin}"]*/ alert('Welcome admin'); /*[/]*/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のコードのこの警告は、100％JavaScriptであるためテンプレートが静的に開かれたときに表示され、ユーザーが管理者である場合はテンプレートが起動されたときにも表示されます。 これは次と同等です：

  [# th:if="${user.admin}"] alert('Welcome admin'); [/]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

...これは実際には、テンプレートの解析中に元のバージョンを変換するコードです。



ただし、コメント内の要素をラップしても、インライン式が行うように、要素が存在する行（ ;が見つかるまで右側）はクリアされないことに注意してください。 この動作は、インライン式専用です。



したがって、Thymeleaf 3.0を使用すると、複雑なJavaScriptスクリプトとCSSスタイルシートを、プロトタイプおよび有効なテンプレートとして有効な自然なテンプレートの形で作成できます。