web-dev-qa-db-ja.com

Thymeleafを使用してSpringモデルからJavaScript変数を設定する

テンプレートエンジンとしてThymeleafを使用しています。 SpringモデルからJavaScript変数に変数を渡す方法は？

春側：

@RequestMapping(value = "message", method = RequestMethod.GET)
public String messages(Model model) {
    model.addAttribute("message", "hello");
    return "index";
}

クライアント側：

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>
javascriptspringthymeleaf
85
Matteo

公式によるとドキュメント：

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

    var message = /*[[${message}]]*/ 'default';
    console.log(message);

/*]]>*/
</script>
157
vdenotaris
var message =/*[[${message}]]*/ 'defaultanyvalue';
17
user5518390

Thymeleaf 3の現在：

  • 定数を表示する：

     <script th：inline = "javascript"> 
 var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ ""; 
 </ script>

  • 変数を表示する：

     var message = [[$ {message}]];

  • または、テンプレートファイルを静的な方法で（サーバーで実行せずに）開いたときに、有効なJavaScriptコードを含めるコメント内。

    Thymeleafはこれを呼び出します：JavaScriptの自然なテンプレート

     var message =/* [[$ {message}]] */"";

    Thymeleafは、コメントの後、セミコロンの前に記述したすべてを無視します。

詳細： http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

9
redochka

すでにページにthymeleafがあることを確認してください

//Use this in Java
@Controller
@RequestMapping("/showingTymleafTextInJavaScript")
public String thankYou(Model model){
 model.addAttribute("showTextFromJavaController","dummy text");
 return "showingTymleafTextInJavaScript";
}


//thymleaf page  javascript page
<script>
var showtext = "[[${showTextFromJavaController}]]";
console.log(showtext);
</script>
9
Nitish Kanade

ドキュメントによる によると、インライン化を行う方法はいくつかあります。
状況に応じて選択する正しい方法。

1）サーバーからjavascriptに変数を配置するだけです：

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

var message = [[${message}]];
alert(message);

/*]]>*/
</script>

2）javascript変数とサーバー側変数を組み合わせます。 javascript内でリクエストするためのリンクを作成する必要があります。

<script th:inline="javascript">
        /*<![CDATA[*/
        function sampleGetByJquery(v) {
            /*[+
            var url = [[@{/my/get/url(var1=${#httpServletRequest.getParameter('var1')})}]] 
                      + "&var2="+v;
             +]*/
            $("#myPanel").load(url, function() {});
        }
        /*]]>*/
        </script>

解決できない1つの状況-次に、テンプレート内で呼び出すJavaメソッド内でjavascript変数を渡す必要があります（それは不可能だと思う）。

8
sanluck

私はこの種のものが野生で機能するのを見ました：

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />
4
Noumenon