使用Thymeleaf動態插入數據到JavaScript圖表

我在我的webapp中使用Google Charts。在我的控制器內部，我傳遞一個持有數據的對象，稍後我將使用方法formatData（）訪問，該方法將數據格式化爲String。這就是從這個方法輸出的樣子：使用Thymeleaf動態插入數據到JavaScript圖表

"[ [new Date(2017,4,27), 116.42], [new Date(2017,4,26), 116.26], [new Date(2017,4,25), 116.05] ]"

我如何將數據插入我的HTML裏面：

<script type="text/javascript" th:inline="javascript"> 
     /*<![CDATA[*/ 
     data.addRows([[${reco.formatData()}]]); 
     /*]]>*/ 
</script>

但作爲二維數組，而不是把它讀成普通字符串Thymeleaf不解釋輸出。在HTMLS的源代碼看起來像這樣：

data.addRows('[ [new Date(2017,4,27), 116.42], [new Date(2017,4,26), 116.26], [new Date(2017,4,25), 116.05] ]');

引號怎麼一回事，因爲代碼不工作，我應該怎麼做才能擺脫他們的？讓我知道是否有更好的方法將數據插入圖表。

來源

2017-05-24 Michael Dz

在thymeleaf 3：

<script type="text/javascript" th:inline="javascript"> 
     /*<![CDATA[*/ 
     data.addRows(/*[(@{${reco.formatData()}})]*/); 
     /*]]>*/ 
</script>

來源

2017-05-24 14:37:12

不幸的是，它不工作，源代碼看起來像上面的代碼一樣。 –

謝謝你的提示，它不工作，因爲我有舊的Thymeleaf 2版本。更新後你的代碼工作正常。 –

你能解釋這段代碼的工作原理嗎？ – holmis83

問題已經有一個（接受）的答案，但在這裏，不同的觀點：

我覺得有什麼th:inline="javascript"做了誤解。它需要表達式的結果並且它的一個JavaScript對象的格式爲（我認爲JSON是特定的）。如果你的方法返回一個字符串，它也將是JavaScript代碼中的一個字符串。這是一個功能，而不是一個錯誤。

替代方案：

從Java代碼，而不是一個字符串返回「正確」的類型。如果您想在JavaScript中使用數組，請從Java代碼返回一個數組（或List）。
要按原樣插入字符串而不截取，請用th:inline="text"替換th:inline="javascript"。

來源

2017-05-24 20:49:27 holmis83

使用Thymeleaf動態插入數據到JavaScript圖表

回答

相關問題