Thymolでもメソッドの実行ができる

Thymol Thymeleaf

【前提条件】

[環境]
[参考サイト]

Thymol公式サイト
Thymol Home

【概要】

以前、ThymolをでEL式によるデータ参照ができることがわかりました。

ThymeleafではOGNLを使うのでプロパティだけではなく、メソッドにもアクセスできます。
同じようにThyemolでもメソッドをJavaScriptの関数として使えるか試してみました。

【ソース】

[HTML]

まずは元となるHTMLソースです。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="/js/lib/thymol/thymol.js" th:remove="all"
                data-thymol-load="/js/lib/thymol/project-setting.js, /js/lib/thymol/data/sample.js">
        </script>
    </head>
    <body>
        <ul th:if="${it.hasError()}" >
            <li th:text="${it.getMessage()}">テストメッセージ1</li>
            <li th:text="${it.getMessage2(1)}">テストメッセージ1</li>
            <li th:text="${it.getMessage2(2)}">テストメッセージ1</li>
        </ul>
    </body>
</html>

ThymeleafのHTMLとして特に難しいことはしていないです。
th:ifとth:textにプロパティではなくメソッドを使用しています。

[JavaScript]

続いてデータを定義しているJavaScriptソースです。

thymol.configurePreExecution(function () {
    var data = {
        hasError: function () {
            return true;
        },
        getMessage: function () {
            return "メッセージ";
        },
        getMessage2: function (number) {
            return "getMesssage2-" + number;
        }
    };

    thymol.requestContext.createVariable("it", data);
});

HTML上で呼び出しているメソッド名と同じ関数を定義します。

【実行画面】


メッセージの内容がThymolによって置き換わっているのがわかると思います。
また、パラメータで受け渡した内容も反映されています。

【まとめ】

と言うことで、Thymolはメソッド部分もJavaScriptの関数として再現できるようです。