Переменное выражение в javascript без использования th: inline

Сначала я искал, но я нашел путаные ответы, так как я новичок в Thymeleaf и любитель в лучшем случае на javascript.

Я просто хочу знать, как передавать переменные выражения в функции javascript, вроде как в JSP:

<a href="#" onclick="javascript:getContactId('${contact.id}');">Button</a>

Конечно, это терпит неудачу с Thymeleaf и передает строку ${contact.id} вместо ее значения, поэтому как я могу получить значение выражения переменных вместо?

Причина, по которой я хочу это сделать, заключается в том, что она зависит от строки, которая повторяется th:each.

Если нет другого способа, кроме использования th:inline, то какой лучший подход рассматривает вышеупомянутый оператор?

Ответы

Ответ 2

В версии Тимелеафа 2.1 я не смог получить принятый ответ на работу. Я нашел руководство от сообщения Twitter от Thymeleaf. Вместо использования th:onclick вы используете th:attr и указываете в нем атрибут onclick.

th:attr="onclick='javascript:getContactId(\'' + ${contact.id} + '\');'"

Ответ 3

Вы не можете поместить переменные javascript в onclick или другие атрибуты DOM. Значение onclick или любого другого атрибута DOM должно быть константной строкой.

Однако вы можете динамически изменять значение атрибута onclick из javascript, например:

yourDomElement.onclick = anyVariable;

Ответ 4

Вы можете сделать это следующим образом:

th: onclick = "'javascript: getContactId (\' '+ ${contact.id} +'\');'"

Ответ 5

Более общий подход, если вам нужно в JS то, что не передается в качестве параметра обработчика события:

th:attr="data-myValueFromThymeleaf=${contact.id}"

Любой атрибут, имя которого начинается с данных, игнорируется всеми браузерами. Таким образом, это не повлияет на пользовательский интерфейс, и вы можете легко прочитать значение в javascript.

Я предпочитаю это, потому что он не идеален для добавления javascript-кода в html (см. ненавязчивый javascript)