Thymeleaf教程（12）ラベル内で、jsでは式を使用します。

テキストに式を使う
もちろん、私たちも同じようにラベルに値をつけられます。

Hello, [[${session.user.name}]]!

効果は以下と同じです。

<p>Hello, <span th:text="${session.user.name}">Sebastianspan>!p>

［…］間の内容は、値を付けられます。有効にするためには、このラベルまたは親ラベルにth:inline属性が必要です。この属性には三つの値があります。text属性の使い方：

"text">Hello, [[${session.user.name}]]!

親ラベルにもこの属性があります。

"text">
...
    
Hello, [[${session.user.name}]]!
...

javaScriptに式を使う
js変数に値を割り当てます
表現もjavascriptで使用できます。まず属性で宣言します。javascript(th:inline="javascript")その後、jsで変数を宣言します。

"javascript"</span>>
/*<![CDATA[*/
    <span class="hljs-keyword">...</span>
    var username = /*[[${session.user.name}]]*/ <span class="hljs-string">'Sebastian'</span>;
    <span class="hljs-keyword">...</span>
/*]]>*/

/*[...]*/表現の理解は以下の通りです。

/*/*/の内容は、ブラウザで静的なページを開いたときに無視されます。

‘Sebastian’はブラウザに表示されます。静的な時

Thymeleaf解析すると、*[]*//の内容が解析され、得られた値を/*[...]*/の内容に置き換えられます。その結果は以下の通りです。

"javascript"</span>>
/*<![CDATA[*/
    <span class="hljs-keyword">...</span>
    var username = <span class="hljs-string">'John Apricot'</span>;
    <span class="hljs-keyword">...</span>
/*]]>*/

コメントを使わなくてもいいです。

"javascript"</span>>
/*<![CDATA[*/
    <span class="hljs-keyword">...</span>
    var username = [[${session.user.name}]];
    <span class="hljs-keyword">...</span>
/*]]>*/

これは静的な表示時にエラーが発生します。注意：エンジンの値を求めた後に注入するのは知能で、それは知能的にタイプのデータを割り当てることができます。

Strings

Numbers

Booleans

Arays

Collection

Maps

ビーンズ（object with getter and setter methods）栗を挙げます。

script th:inline="javascript">
/*...
var user = /*[[${session.user}]]*/ null;
...
/*]]>*/

$session.userはuserオブジェクトを取得します。書き込み後は以下の通りです

"javascript"</span>>
/*<![CDATA[*/
<span class="hljs-keyword">...</span>
var user = {<span class="hljs-string">'age'</span>:null,<span class="hljs-string">'firstName'</span>:<span class="hljs-string">'John'</span>,<span class="hljs-string">'lastName'</span>:<span class="hljs-string">'Apricot'</span>,
<span class="hljs-string">'name'</span>:<span class="hljs-string">'John Apricot'</span>,<span class="hljs-string">'nationality'</span>:<span class="hljs-string">'Antarctica'</span>};
<span class="hljs-keyword">...</span>
/*]]>*/

エンジンもコードブロックの追加と削除を許可します。コードブロックを追加します。

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 = 'This is a non-working template';
/* -]*/
var f = function(){
...

解析は以下の通りです

var x = 23;
var f = function(){
...