Thymeleaf：传递 javascript 参数

Posted 2023-02-26

【中文标题】Thymeleaf：传递 javascript 参数

【英文标题】：Thymeleaf : passing javascript parameters

【发布时间】：2017-10-20 18:35:15

【问题描述】：

我有一个基本的 SpringBoot 应用程序。使用 Spring Initializer、嵌入式 Tomcat、Thymeleaf 模板引擎，并将其打包为可执行的 JAR 文件。 我想将 POJO 的属性传递给 javascript 函数：

   <tr th:each="company: $companies" >                                                
         <td class="col_actions">
           <a th:href="@/company/edit/id(id=$company.id)" style="color:#808080; margin-right: 10px;">
             <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
           </a>
           <a href="#" style="color:#808080;  text-align: center;" onclick="javascript:confirmDelete (id(id=$company.id));">
              <i class="fa fa-times" aria-hidden="true" ></i>
            </a>
         </td>
   </tr>

但我收到一个错误：Uncaught SyntaxError: missing ) after argument list

【参考方案1】：

问题来自anchor，如果confirmDelete()函数需要字符串id，请试试这个

th:onclick="'javascript:confirmDelete(\'' + $company.id + '\');'"

如果它需要一个数字 id

th:onclick="'javascript:confirmDelete(' + $company.id + ');'"

【讨论】：

可能不适用于最新版本的百里香叶，请参考我发布的类似问题的答案***.com/a/64884416/5105263

【参考方案2】：

另一种方式 - th:onclick="|confirmDelete('$company.id')|"

或者，如果您想通过“_”发送多个参数，请使用 th:onclick="|confirmDelete('$type_$company.id')|"

【参考方案3】：

我发现很多 solutions 对我没有帮助。

这对我有用。

<div class="add-to-cart">
    <button th:attr="onclick='addToBasket(\'' + $product.getId()+  '\');'"> add to basket
    </button>
</div>

【讨论】：

天啊...谢天谢地...我也找到了无数的“解决方案”来解决这个问题，但没有一个有效......除了这个。这是如何将模型变量从 Thymeleaf 传递到 JavaScript 函数的问题的最佳答案。掌声。

【参考方案4】：

这对我有用，使用起来简单明了 [[ ]]

使用链接：

<a href="#" id="editUserButton" th:onclick="editUser([[$user.getId]])">Edit</a>

使用按钮：

<button type="button" id="editUserButton" class="btn btn-primary"  th:onclick="editUser([[$user.getId]])">Edit</button>

传递多个参数：

<button type="button" id="editUserButton" class="btn btn-primary" th:onclick="editUser([[$user.getId]],[[$user.getLastName]])">Edit</button>