Thymeleaf onclickで動的な値を設定したい

ボタンやリンクを押したときに、onclickでJavaScriptの関数を呼びたいけど
引数には動的な値や変数を設定したい。

検索すると複雑なコードが結構ヒットしてしまうのですが、
Thymeleafならではの書きやすい方法が↓

// HTML
<input type="button" th:onclick="|testFunc('__${data.id}__','__${data.name}__')|" />

// JavaScript
function testFunc(id,name) {
  var message = id + ":" + name;
  alert(message);
}

属性値にth:を付けるとThymeleafとして記述可能。
リテラル置換とプリプロセッシングを駆使して、簡潔で見やすいコードを書くことができる。

 

ちなみに検索でよくヒットするのが↓

// HTML
<input type="button" th:attr="onclick='testFunc(\'' + ${data.id} + '\',\'' + ${data.name} + '\');'" />

エスケープがごちゃごちゃしていて書きづらい&見づらいですね・・・

 

最後に、上記を駆使したサンプルコード

リンク(実態はボタン)付きの一覧表を作成するコード

// sample.html
<table id="testTable">
 <colgroup>
  <col>
  <col>
  <col>
 </colgroup>
 <thead>
  <tr>
   <th>番号</th>
   <th>氏名</th>
   <th>備考</th>
  </tr>
 </thead>
 <tbody>
  <tr th:each="data : ${sampleList}">
   <td><button type="button" class="btn btn-link" 
        th:onclick="|sampleFunc('__${data.name}__','__${data.note}__')|"
        th:text="${data.id}">id</button></td>
   <td th:text="${data.name}"></td>
   <td th:text="${data.note}"></td>　
  </tr>
 </tbody>
</table>

// JavaScript
function sampleFunc(name,note) {
  var message = name + "さんは" + note + "です。";
  alert(message);
}

// Controller.java
public String init(Model model) {

 List<Sample> sampleList = new ArrayList<>();
 Sample data = new Sample();
 data.setId(1);
 data.setName("田中太郎");
 data.setName("1人目");
 sampleList.add(data);
 data = new Sample();
 data.setId(2);
 data.setName("山田花子");
 data.setName("2人目");
 sampleList.add(data);

 model.addAttribute("sampleList", sampleList);

 return "sample";
}

// Sample.java
@Data
public class Sample {
 private Integer id;
 private String name;
 private String note;
}

※ボタンの見た目をリンクにするクラスはBootstrapで！

 

これでリンクを押すと
「田中太郎さんは1人目です。」とか「山田花子さんは2人目です。」とかのアラートメッセージがでます。