thymeleafテーブルのボタンを動的に作成する

Question

私はthymeleafを使ってオブジェクト（Snacks）のリストを表すテーブルを生成しています。各スナックには、それに関連した多数の投票があります。私は、その投票数表示はその後、回更新送信ボタンを

私は特定のスナックを参照するにはどうすればよい

<table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>Snacks</th> 
     <th>Last Date Purchased</th> 
     <th>Votes</th> 
     <th>Up Vote</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr th:each="snack,iterStat : ${snacksuggested}"> 
     <td th:text="${snack.name}"></td> 
     <td th:text="${snack.lastPurchaseDate}"></td> 
     <td th:text="${snack.votes}"></td> 
     <td> 
      <button class="btn btn-default" th:id="${'voteBtn_'+(iterStat.count -1)}" th:text="${snack.name} +' Vote'">Up Vote</button> 
     </td> 
     </tr> 
    </tbody> 
</table> 

1. をクリックすると増加し、ユーザがそれに投票することができ、各スナックためのボタンを持っていると思いますか？
2. javascriptの関数定義はどこに配置しますか？
3. ボタンクリックで表示される投票数を更新するにはどうすればよいですか？

PS。私は春を使用しています

Answer 1

私は春にthymeleafを使用していません。 jspページでjstlを使用しました。それで、私はあなたを私の視点から説明しています。まず、Javascript/Jqueryからのアクセシビリティのために生成しているすべての要素にIDを提供する必要があります。

1. 我々はclass vote_buttonを使用しておやつを参照します。だからあなたのクエリに応答する

   。すべてのスナックに同じクラスが適用されます。

2. スクリプトタグ内のコードの最後にjquery/javascript関数を配置して、JQueryが起動する前にDOMがロードされていることを確認できます。

3. idを含む各ボタンに値を追加できます。その後、クリックごとにidを取得し、それを使ってvotecountを参照することができます。今ではjQueryの/ JavaScriptコードを書く時間であるテーブルFO各要素にIDを割り当てた後

   <tr th:each="snack,iterStat : ${snacksuggested}"> 
       <td th:text="${snack.name}" id="snackname_${iterStat.count-1}"></td> 
       <td th:text="${snack.lastPurchaseDate} id="purchasedate_${iterStat.count-1}"></td> 
       <td th:text="${snack.votes} id="votes_${iterStat.count-1}"></td> 
       <td> 
        <button class="btn btn-default vote_button" value="${'voteBtn_'+(iterStat.count -1)}" th:id="${'voteBtn_'+(iterStat.count -1)}" th:text="${snack.name} +' Vote'">Up Vote</button> 
       </td> 
       </tr> 
   

。別の投票ボタンにアクセスするには、クラスを使用する必要があります。

$(document).ready(function() { 
    $(".vote_button").on('click', function() { 
      var id = $(this).val(); 
      var idArray = id.split('_'); 
      var voteId= idArray[1]; 
      var currentVal = $("#votes_"+voteId).html(); 
      $("#votes_"+voteId).html(currentVal+1); 
    }); 
}); 

私が直面している同様のシナリオに遭遇しました。これが私がそれを解決した方法です。それがあなたを助けることを願っています

オブジェクトを動的にバインドすることはお勧めしません。私がしたことは、すべての行に同じクラスを与えて、vote_buttonとし、このクラスをすべての動的に作成された要素に適用することでした。 votebuttonがクリックされるたびに、vote_id（名前はアンダースコアで区切られ、その後id）で生成されたボタンの値またはボタンのIDにアクセスできます。この値を分割することで、参照したい行のidを得ることができます。このidの各行の値には、各<td>の名前がname_id（votes_1、snackname_1など）であるため、アンダースコアの後の数字は同じになり、行の位置になります。