Настройка переменной javascript из модели Spring с помощью Thymeleaf
как я могу прочитать переменные модели Spring
модель и настройка ее в Javascript?
обратите внимание, что я использую Thymeleaf
как движок шаблонов.
Весна-стороны:
@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>
6 ответов
официальный документация:
<script th:inline="javascript">
/*<![CDATA[*/
var message = /*[[${message}]]*/ 'default';
console.log(message);
/*]]>*/
</script>
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
по данным документации есть несколько способов сделать подстановку.
Правильный путь вы должны выбрать исходя из ситуации.
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>
одна ситуация, которую я не могу решить - тогда мне нужно пройти переменная javascript внутри метода Java, вызывающего внутри шаблона (это невозможно, я думаю).
//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>
Я видел, как такие вещи работают в дикой природе:
<input type="button" th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />