ThymeleafでJavaScriptのちょっとした注意点をメモ

こんにちは。しーばです。みんな大好きThymeleafのお話です。
今日は気が向いたのでThymeleaf&JavaScriptね。

http://www.thymeleaf.org/doc/html/Using-Thymeleaf.html#script-inlining-javascript-and-dart

Natural Templating

Thymeleafはナチュラルテンプレーティングってのをコンセプトに持ってます。
静的に見ても動的に見てもちゃんと見れるってことね。こんな感じ。

<p>Today is: <span th:text="${today}">13 february 2011</span>.</p>

静的に見ると、 "th:"で始まる属性は「なにそれ？知らんわ！」ってスルーされるから、これと同じことになるね

<p>Today is: <span>13 february 2011</span>.</p>

動的に見ると、 "th:"で始まる属性がThymeleafに解釈されてこうなる

<p>Today is: <span>23 november 2013</span>.</p>

なにがいいかって。アプリを動かしてなくてもデザインがちゃんと見れるってことね。

Thymeleaf and JavaScript

その思想はJavascriptにも拡張されてて。インラインJavaScriptを次のように書けます。

<script th:inline="javascript">
/*<![CDATA[*/
    ...

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

    ...
/*]]>*/
</script>

静的にみると session.user.name はコメントなので、usernameは'Sebastian'になります。
Thymeleafで動かすと session.user.name の値が username に適用されます。こんな感じ。

キャー素敵！

<script th:inline="javascript">
/*<![CDATA[*/
    ...

    var username = 'John Apricot';

    ...
/*]]>*/
</script>

オブジェクトを突っ込むときの注意点

JavaScriptでオブジェクトも突っ込んだれ！！と。

<script th:inline="javascript">
/*<![CDATA[*/
    ...

    var user = /*[[${session.user}]]*/ null;

    ...
/*]]>*/
</script>

で、Userクラスはこんな感じ。

public class User {
  public String name;
  public Integer age;
}

アプリで動かしてみたら

<script th:inline="javascript">
/*<![CDATA[*/
    ...

    var user = {};

    ...
/*]]>*/
</script>

(´・ω・｀)ｼｮﾎﾞｰﾝ

よくよくドキュメントを読み直してみたら。

Note that this evaluation is intelligent and not limited to Strings. Thymeleaf will correctly write in Javascript/Dart syntax the following kinds of objects:

Strings

Numbers

Booleans

Arrays

Collections

Maps

Beans (objects with getter and setter methods)

ん・・・。

Beans (objects with getter and setter methods)

まじか！ん。setter関係ねーよなー。とgetterをつけて。

public class User {
  public String name;
  public Integer age;

  public String getName() {
    return name;
  }

  public Integer getAge() {
    return age;
  }
}

無事思ったとおりに動いてくれました！

<script th:inline="javascript">
/*<![CDATA[*/
    ...

    var user = {"age":33,"name":"Mitsuyuki Shiiba"};

    ...
/*]]>*/
</script>

(∩´∀｀)∩ﾜｰｲ
ThymeleafのJavaScriptに渡すためだけにgetterつけなきゃなのだけど。まいっか。
Listを渡したら配列にしてくれたりとか。結構便利だったりします。

じゃ、いまからスイートブールのミミの部分だけ食べようかな。