thymeleaf - 如何在 Thymeleaf 的 onclick 中传递参数？

Question

我正在传递 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

Answer 1

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

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

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

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

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 的表示形式，请使用库来构建它 - 不要像我在我的小演示中那样偷懒：不要使用字符串连接。）