如何在 Thymeleaf 的 onclick 中传递参数？答案

【问题标题】：How to pass parameter in onclick in Thymeleaf?如何在 Thymeleaf 的 onclick 中传递参数？
【发布时间】：2020-10-01 20:28:47
【问题描述】：

我正在传递arrayList，但onclick 正在将参数传递给javascript 函数中的字符串。如何获取数组而不是字符串

<div class="card" th:data-work="${top.section}" onclick="showData(this.dataset.work)">

在控制台窗口中打印字符串，但我传递了数组，但我不知道它是如何转换为字符串的。

const activityModal  = (work) => {
        console.log(typeof work) // string  
        console.log(work) //[com.example.working.Foobar@7r6r8e]
        console.log(work[0]) // [

    }

【问题讨论】：

标签： thymeleaf

【解决方案1】：

div 中data-work 属性的内容是${top.section} 返回的字符串表示形式。所以，在你的情况下，看起来像这样：

<div class="card" 
     data-work="[com.example.working.Foobar@7r6r8e]" 
     onclick="showData(this.dataset.work)">some content</div>

[com.example.working.Foobar@7r6r8e] 是在 Thymeleaf 处理模板时对 ArrayList 中的每个 Foobar 对象调用 toString() 方法的结果。

因此，要在 div 中获取有用的数据，您需要覆盖 Foobar 类中的 toString() 方法。

此外，您需要以一种能够提供每个Foobar 实例中数据的可用表示的方式覆盖它。

在我的小测试用例中，我的测试类中只有一个字段，所以我这样做了：

@Override
public String toString() {
    return "{ \"amount\":" + amount + "}";
}

我选择将数据格式化为 JSON，以便 JavaScript 更容易处理。

现在，div 看起来像这样（在我的例子中）：

<div class="card" 
     data-work="[{ &quot;amount&quot;:123}, { &quot;amount&quot;:456}]" 
     onclick="showData(this.dataset.work)">click me!</div>

在我页面上的showData 函数中，我有这个：

function showData(work) {
    console.log(JSON.parse(work))
}

这表明我的数据已从字符串解析回包含两个 JS 对象的 JavaScript 数组（因为我在 ArrayList 中放置了 2 个对象）：

请注意如何选择覆盖 toString() - 或者是否应该覆盖。

您可能更喜欢有一个单独的方法，它会生成Foobar 的字符串表示，只是为了传递给您的模板。您可能不希望您的类的规范字符串表示由您的网页需求决定。

它们（toString 和您的字符串化器）可能应该作为单独的格式保存，因为它们的用途非常不同。

（此外，如果您确实选择使用 JSON 作为传递给 Thymeleaf 的表示形式，请使用库来构建它 - 不要像我在我的小演示中那样偷懒：不要使用字符串连接。）

【讨论】：