Параметры Thymeleaf / JavaScript

Question

Я уже некоторое время использую SO и нашел решение для большинства своих проблем, но теперь у меня есть вопрос, касающийся одного из найденных ответов.
(Исходное сообщение: Thymeleaf: кликабельная строка)

Второй ответ дает серьезное решение моей проблемы, но мне бы очень хотелось понять, как и почему это работает.

<tr th:each="item : ${itmes}" 
     th:onclick="'javascript:rowClicked(\'' + ${item.someField} + '\');'">
    ...
    <td>Some data</td>
    ...
</tr>

Для чего здесь используются символы \'' и '\' и почему передача параметров не работает без них?Я пробовал гуглить заранее, но не нашел ничего особенно полезного, но это также может быть потому, что я не задавал правильные вопросы.

Спасибо за вашу помощь.

Answer 1

Весь смысл в том, чтобы создать строку, которая выглядит следующим образом:

rowClicked('somefield');

Она состоит из трех строк, которые объединяются вместе с оператором +:

'rowClicked(\''

${item.someField}

'\');'

Первая и последняя части представляют собой строки, заключенные в одинарные кавычки ', однако, поскольку в выводе требуется одиночная кавычка, добавляется \' (который представляет собой экранированную одинарную кавычку) - поэтому первая строка rowClicked(' и последний ');.После этого все объединяется вместе: rowClicked('somefield');

Есть несколько альтернатив, которые, на мой взгляд, легче читать.Например, вы можете использовать буквенное замещение вместо этого, и это будет выглядеть так:

th:onclick="|rowClicked('${item.someField}');|"

Answer 2

Я считаю, что слишком много цитат.Требуется достаточно кавычек, чтобы вы получили

th:onclick="'javascript:rowClicked('someString');"

, на самом деле вы можете удалить метку javascript: и просто набрать

th:onclick="'rowClicked(\'' + ${item.someField} + '\');"

Это предполагает, что некоторые кавычки мы не можем увидеть в вашем примере.

Я бы лично установил атрибут data для поля item.some и имел бы

th:onclick="rowClicked(this);"

, а в rowClicked -

function rowClicked(row) {
  var val = row.getAttribute("data-item");