Налаштування змінної JavaScript від моделі Spring за допомогою Thymeleaf


112

Я використовую Чебрець як двигун шаблону. Як передати змінну від моделі 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
Не працює ... помилка
jacaca uncaught

6
Добре працює, також можна читати з messages.properties: var msg = [[# {msg}]];
Андрій

2
@szxnyc, якщо ви забудете /*<![CDATA[*/макрос, ви отримаєте це.
CodeMonkey

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

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

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

6
Зауважте, що між / * * / та вмістом [[]] не повинно бути пробілів.
jyu

1
Варто зазначити, що defaultanyvalueзасіб буде використовуватися лише при статичному запуску сторінки, тобто поза веб-контейнером. Якщо запустити всередину контейнера і змінна messageне була оголошена, то вихідний вихідний код будеvar message = null;
Felipe Leão

3
Також важливо додати th:inline="javascript"до тегу сценарію.
redent84

15

Чебрець 3 зараз:

  • Показувати константу:

    <скрипт th: inline = "javascript">
    var MY_URL = /* evidence evidence${T(com.xyz.constants.Fruits).cheery} freedict*/ "";
    </script>
    
  • Відображення змінної:

    var message = [[$ {message}]];
    
  • Або в коментарі мати дійсний код JavaScript, коли ви відкриваєте файл шаблону статичним чином (не виконуючи його на сервері).

    Чебрець називає це: природні шаблони JavaScript

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

    Чебрець ігнорує все, що ми написали після коментаря та перед крапкою з комою.

Більше інформації: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining


Дякую тобі! хотів дати тобі пиво, я шукав цей синтаксис вар. MY_URL = /* evidence evidence${T(com.xyz.constants.Fruits).cheery} freedict*/ "";
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} + '\');'" />
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.