时间戳

首页 > 解决方案 > Thymeleaf onclick 意外的标识符 javascript

javascript - Thymeleaf onclick 意外的标识符 javascript

问题描述

我无法弄清楚如何让这个 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>

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

标签： javascriptspring-bootthymeleaf

解决方案

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

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

推荐阅读