ThymeleafでJavaScriptを利用する

JavaScriptもモックのHTMLをそのまま使える

モックアップのHTMLに対して、JavaScriptで動きを仮実装するケースがあると思います。
モックアップのHTMLから実際のWebアプリケーションに変換する際に、JavaScriptの実装を切り替えないといけない…こんな苦悩もThymeleafはすこし解決してくれます。

動作バージョン

Thymeleaf 2.x , 3.x

宣言部に一工夫加えるとOK

HTML内にJavaScriptを定義する方法は、「要素の本文」を以下のように記述をするだけです。次の例はjQueryと組み合わせた例です。

sample.html

<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
    $("#taskCloseButtn").bind("click" , function() {
        $("#status").val("cl");
        url = /*[[ @{/register} ]]*/ 'register.html';
        goSubmit(url);
    });
});
/*]]>*/
</script>

• <script>要素に th:inline="javascript" を追加します
• /*<![CDATA[*/ …… /*]]>*/でJavaScriptのコードを囲います
• /*[[ …… ]]*/で囲うことで、ThymeleafからJavaScriptコードの中へ値を出力します

例えば上記の例では、urlの部分が切り替わります。

/*[[ @{/register} ]]*/ は、Thymeleafがコンテキストパスも自動的に含めたURLを出力し、HTMLを直接開いた場合はregister.htmlとなります。