将 Thymeleaf 变量传递给 Javascript 函数

Question

我想将 Thymleaf 变量传递给 javascript 函数。我的百里香叶是这样的

<a class="cat-title"  th:onclick="|fetchProduct('${category.categoryId}','${businessId}')|">
                                    <p th:text="${category.name}"></a>

而我的javascript代码是这样的

   function fetchProduct(businessId,categoryId) {

    var productUrl = '/webstore/business/' + businessId + '/category/' + categoryId + '/products';
    ............
    ............
    }   

但是当我加载页面时出现此错误

引起：org.thymeleaf.exceptions.TemplateProcessingException：仅 允许返回数字或布尔值的变量表达式 上下文中，任何其他数据类型在此上下文中均不受信任 表达式，包括字符串或任何其他可能的对象 呈现为文本文字。

这个错误的原因是什么？

Answer 1

试试这个

<a class="cat-title"  th:onclick="fetchProduct([[${category.categoryId}]], [[${businessId}]]);">
    <p th:text="${category.name}"></a>

Answer 2

我猜原因可能是这个错误https://github.com/thymeleaf/thymeleaf/issues/707 不久前报告的。

你可以尝试内联 JS 变量：

<a class="cat-title" 
   th:onclick="'javascript:fetchProduct(\'' + [[${category.categoryId}]] + '\', \'' + [[${businessId}]] + '\');'">
       <p th:text="${category.name}">
</a>

还有另一种方法也应该可以工作（还没有在编辑器中检查过！）但它看起来更好一些，因为你不需要连接字符串和这么多的 \' :)

<a class="cat-title" 
    th:dataCatId="${category.categoryId}"
    th:dataBizId="${businessId}" 
    th:onclick="javascript:fetchProduct(this.getAttribute('dataCatId'), this.getAttribute('dataBizId'));">
        <p th:text="${category.name}">
</a>