Thymeleaf onclick 意外的标识符 javascript答案

【问题标题】：Thymeleaf onclick Unexpected identifier javascriptThymeleaf onclick 意外的标识符 javascript
【发布时间】：2021-11-05 07:38:13
【问题描述】：

我不知道如何让这个 Thymeleaf 代码正常工作。我收到 th:onclick 函数的意外标识符：

th:onclick="'addBadge('badgeListTwy', \'' + ${taxiway.getId()} + '\', \'' + ${taxiway.getName()} + '\');'"

这是我尝试使用 th:each 为按钮填充的下拉列表的一部分

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li  th:each="taxiway : ${taxiways}">
        <a class="dropdown-item" href="#" th:onclick="'addBadge('badgeListTwy', \'' + ${taxiway.getId()} + '\', \'' + ${taxiway.getName()} + '\');'"><span th:text="${taxiway.getName()}"></span></a>
    </li>
</ul>

这给了我一个“未捕获的语法错误：意外的标识符”错误

【问题讨论】：

标签： javascript spring-boot thymeleaf

【解决方案1】：

最好的方法是将参数存储在数据属性中，如下所示：

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li th:each="taxiway : ${taxiways}">
        <a class="dropdown-item" href="#"
            th:data-id="${taxiway.id}"
            th:data-name="${taxiway.name}"
            onclick="addBadge('badgeListTwy', this.getAttribute('data-id'), this.getAttribute('data-name'));"><span th:text="${taxiway.getName()}"></span></a>
    </li>
</ul>

它简化了引用，并消除了某些 JavaScript 漏洞。（注意我使用的是onclick 而不是th:onclick。）

话虽如此，原始表达式可能不起作用，因为您没有转义 'badgeListTwy' 周围的引号

【讨论】：