Настройка переменной JavaScript из модели Spring с помощью Thymeleaf


113

Я использую 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>

Ответы:


191

Согласно официальной документации :

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

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

/*]]>*/
</script>

1
Не работает ... ошибка javascript неперехваченная синтаксическая ошибка
szxnyc

6
Работает нормально, также возможно чтение из messages.properties: var msg = [[# {msg}]];
Андрей

2
@szxnyc, если вы забудете /*<![CDATA[*/макрос, вы его получите.
CodeMonkey 01

8
Также обратите внимание на<script th:inline="javascript">
Григорий Кислин

1
@ MichałStochmal вы можете загружать встроенный javascript поверх внешнего javascript и использовать те же переменные (определенные во встроенном javascript) во внешнем javascript.
Альфас Джикани,

20
var message =/*[[${message}]]*/ 'defaultanyvalue';

6
Обратите внимание, что между / * * / и содержащимся в нем [[]] не должно быть пробелов.
июн

1
Стоит отметить, что defaultanyvalueбудет использоваться только при статическом запуске страницы, то есть вне веб-контейнера. Если запустить внутри контейнера и переменная messageне была объявлена, получится исходный кодvar message = null;
Фелипе

3
Также важно добавить th:inline="javascript"в тег скрипта.
redent84 06

15

Тимелеаф 3 сейчас:

  • Отобразить константу:

    <script th: inline = "javascript">
    var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery} visible**/ "";
    </ Скрипт>
    
  • Отобразить переменную:

    var message = [[$ {message}]];
    
  • Или в комментарии, чтобы иметь допустимый код JavaScript, когда вы открываете файл шаблона статическим способом (без его выполнения на сервере).

    Thymeleaf называет это: естественные шаблоны JavaScript.

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

    Thymeleaf проигнорирует все, что мы написали после комментария и до точки с запятой.

Дополнительная информация: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining


Спасибо вам! хочу дать вам пива, я искал этот синтаксис var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}] ]*/ "";
Aung Aung

12

Согласно документации, есть несколько способов встраивания.
Правильный путь нужно выбирать исходя из ситуации.

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, вызывающего внутри шаблона (я думаю, это невозможно).


9

УБЕДИТЕСЬ, что у вас уже есть тимлист на странице

//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>

6

Я видел такие вещи в дикой природе:

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

0

Если вам нужно отобразить вашу переменную без экранирования, используйте этот формат:

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

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

/*]]>*/
</script>

Обратите внимание на [(скобки, в которые заключена переменная.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.