ThymeleafでJSONオブジェクトをJavaScriptにインライン化する方法

Question

Thymeleafテンプレートでオートコンプリートjqueryコンポーネントを使用したいと思います。あなたは、私は要素のリストを含むデータオブジェクトを必要と見ることができるように

$('input.autocomplete').autocomplete({ 
    data: { 
     "Apple": null, 
     "Microsoft": null, 
     "Google": 'http://placehold.it/250x250' 
    }, 
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity. 
    onAutocomplete: function(val) { 
     // Callback function when value is autcompleted. 
    }, 
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1. 
    }); 

：Materializecssフロントエンドframworkのオートコンプリート機能は、次のようになります。このリストは動的なものなので、私はこの変数をサーバー側から埋め込みたいと思っています。 Thymeleaf documentationは、次の例では、動作するはずの文書に基づいて

<script type="text/javascript" th:inline="javascript" th:src="@{/js/example.js}"></script> 

を言うように：

$('input.autocomplete').autocomplete({ 
     data: [[${companies}]], 
     limit: 20, // The max amount of results that can be shown at once. Default: Infinity. 
     onAutocomplete: function(val) { 
      // Callback function when value is autcompleted. 
     }, 
     minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1. 
     }); 

問題は、Thymeleafは、このケースで何をインライン化しないということです。サーバサイドの変数やコマンドオブジェクトを埋め込むことは、Thymeleafでうまく動作しますが、javascriptで動作させることはできません。私が使用 春ブーツ1.5.4、3.0.2 Thymeleaf

Answer 1

th:inline="javascript"は、あなたのスクリプトをインラインであれば、それは<script>と</script>間のHTMLテンプレートである動作します。

評価する別のJavaScriptファイルとThymeleaf式がある場合は、JAVASCRIPTテンプレートモードを使用してThymeleaf経由でjsファイルを処理する必要があります。

Answer 2

$('input.autocomplete').autocomplete({ 
    data: [($ { 
     companies 
    })], // use '(', ')' 
    limit: 20, 
    onAutocomplete: function(val) {}, 
    minLength: 1 
}); 

上記のコードを試してください。私もそれを経験しました。