Thymeleaf/JavaScript 参数

Question

我使用 SO 已经有一段时间了，并找到了解决我大部分问题的方法，但现在我有一个关于我找到的答案的问题。
（原帖：Thymeleaf: clickable row）

第二个答案为我的问题提供了一个强大的解决方案，但我真的很想了解它的工作原理和原因。

<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');

有一些我认为更容易阅读的替代方案。例如，您可以改用literal substitution，它看起来像这样：

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

Answer 2

我发现引用太多了。需要足够的引号，所以你最终会得到 ​​p>

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

其实你可以去掉javascript:标签，然后就可以了

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

这是假设我们在您的示例中看不到一些引号。

我会亲自为 item.somefield 设置数据属性并拥有

th:onclick="rowClicked(this);"

并且在 rowClicked 中有

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