JavaScriptでSpringMVCモデルオブジェクトにアクセスする

1. 概要

このチュートリアルでは、JavaScriptコードを含むThymeleafビューでSpringMVCオブジェクトにアクセスする方法を示します。この例ではSpring BootとThymeleafテンプレートエンジンを使用しますが、このアイデアは他のテンプレートエンジンでも機能します。

ここでは、JavaScriptコードがエンジンによって生成されたWebページに埋め込まれている、または内部にある場合と、ページの外部にある場合（たとえば、別のJavaScriptファイル）の2つのケースについて説明します。

2. 設定

Thymeleafテンプレートエンジンを使用するSpring BootWebアプリケーションをすでに構成していると仮定します。それ以外の場合は、次のチュートリアルを開始すると便利です。

シンプルなアプリケーションのブートストラップ–SpringBootアプリケーションを最初から作成する方法について
Spring MVC + Thymeleaf 3.0：新機能 –Thymeleaf構文の使用方法について

さらに、アプリケーションに、index.htmlという名前のテンプレートからビューをレンダリングするエンドポイント/indexに対応するコントローラーがあるとします。このテンプレートには、script.jsなどの埋め込みまたは外部のJavaScriptコードが含まれている場合があります。

私たちの目標は、埋め込みまたは外部のJavaScript（JS）コードからSpringMVCパラメーターにアクセスできるようにすることです。

3. パラメータにアクセスする

まず、JSコードから使用したいモデル変数を作成する必要があります。

Spring MVCでは、これを行うためのさまざまな方法があります。 ModelAndViewアプローチを使用してみましょう。

@RequestMapping("/index")
public ModelAndView thymeleafView(Map<String, Object> model) {
    model.put("number", 1234);
    model.put("message", "Hello from Spring MVC");
    return new ModelAndView("thymeleaf/index");
}

Spring MVCのModel、ModelMap、およびModelViewに関するチュートリアルで、他の可能性を見つけることができます。

4. 埋め込まれたJSコード

埋め込まれたJSコードは、 index.html 内部にあるファイル element. そこにSpringMVC変数を非常に簡単に渡すことができます。

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>

Thymeleafテンプレートエンジンは、すべての式を現在の実行のスコープで使用可能な値に置き換えます。これは、テンプレートエンジンが上記のコードを次のHTMLコードに変換することを意味します。

<script>
    var number = 1234;
    var message = "Hello from Spring MVC!";
</script>

5. 外部JSコード

外部JSコードがに含まれているとしましょう index.html 同じを使用してファイル tag, in which we specify the src attribute:

<script src="/js/script.js"></script>

ここで、 script.jsのSpringMVCパラメーターを使用する場合は、次のようにする必要があります。

前のセクションで行ったように、埋め込みJSコードでJS変数を定義します
script.jsファイルからこれらの変数にアクセスします

外部JSコードは、埋め込まれたJSコードの変数の初期化後に呼び出す必要があることに注意してください。

これは、JSコードの実行順序を指定する方法と、非同期のJSコード実行を使用する方法の2つの方法で実現できます。

5.1. 実行順序を指定する

これを行うには、index.htmlに埋め込まれたコードの後に外部JSコードを宣言します。

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>

5.2. 非同期コード実行

この場合、 index.html で外部および埋め込みJSコードを宣言する順序は重要ではありませんが、script.jsのコードを一般的なページに読み込まれるラッパー：

window.onload = function() {
    // JS code
};

このコードは単純ですが、最も一般的な方法は、代わりにjQueryを使用することです。このライブラリを最初に含めます element in the index.html file:

<!DOCTYPE html>
<html>
    <head>
        <script src="/js/jquery.js"></script>
        ...
    </head>
 ...
</html>

ここで、JSコードを次のjQueryラッパー内に配置できます。

$(function () {
    // JS code
});

このラッパーを使用すると、ページコンテンツ全体、つまり他のすべての埋め込みJSコードが完全に読み込まれた場合にのみJSコードが実行されることを保証できます。

6. ちょっとした説明

Spring MVCでは、Thymeleafテンプレートエンジンはテンプレートファイル（この場合は index.html ）のみを解析し、それをHTMLファイルに変換します。このファイルには、テンプレートエンジンの範囲外の他のリソースへの参照が含まれている可能性があります。これらのリソースを解析してHTMLビューをレンダリングするのは、ユーザーのブラウザーです。

したがって、これらのリソースはテンプレートエンジンによって解析されず、コントローラーで定義された変数を埋め込みJSコードにのみ挿入し、外部JSコードで使用できるようにする場合があります。