Dynamisch Erstellen von Schaltflächen in Thymeleaf-Tabelle

Question

Ich erzeuge eine Tabelle mit thymeleaf, die eine Liste von Objekten (Snacks) darstellt. Jeder Snack hat eine bestimmte Anzahl von Stimmen. Ich möchte für jeden Snack auf eine Schaltfläche haben, so ein Benutzer dafür stimmen kann, seine Stimme einmal ein Submit-Button geklickt

dann aktualisiert angezeigt zunehmende

<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. Wie verweisen ich einen bestimmten Snack?
2. Wo stelle ich die JavaScript-Funktionsdefinition?
3. Und wie kann ich die angezeigte Anzahl der Stimmen auf Knopfdruck aktualisieren?

PS. Ich benutze Frühling

Answer 1

Ich habe nicht thymeleaf auf Frühling verwendet. Ich habe JSTL auf JSP-Seiten verwendet. Also, ich erkläre dich aus meiner Sicht. Zuallererst sollten Sie jedem Element, das Sie generieren, IDs für die Zugänglichkeit von Javascript/Jquery geben.

So Ihre Fragen zu beantworten:

1. Wir werden einen Snack mit class vote_button verweisen. Die gleiche Klasse wird auf jeden Snack angewendet.

2. Sie können die Funktion jquery/javascript am Ende des Codes in Skript-Tags platzieren, um sicherzustellen, dass das DOM vor dem Start von JQuery geladen wurde.

3. Sie können jeder Schaltfläche, die die id enthält, einen Wert hinzufügen. Dann können Sie bei jedem Klick id abrufen und diese verwenden, um auf die Stimmenzahl zu verweisen.

   <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> 
   

Nach ids zu jedem Element fo der Tabelle zuweisen jetzt ist es Zeit, ein JQuery/JavaScript-Code zu schreiben. Wir müssen eine Klasse verwenden, um auf verschiedene Abstimmknöpfe zuzugreifen.

Ich stieß auf ein ähnliches Szenario, dass Sie konfrontiert sind und das ist, wie ich es gelöst habe. Ich hoffe es hilft dir.

Es ist nicht ratsam, Objekte dynamisch zu binden. Was ich getan habe, war, dass ich jeder Zeile vote_button dieselbe Klasse gab und diese Klasse dann auf jedes dynamisch erzeugte Element anwendete. Jedes Mal, wenn auf votebutton geklickt wird, können wir auf den Wert der Schaltfläche oder die ID der Schaltfläche zugreifen, die als vote_id generiert wird (Name getrennt durch Unterstrich und dann ID). Durch Aufteilen dieses Wertes können wir die id der Zeile, die wir referenzieren wollen, erhalten. Wir können auf jeden Wert der Reihe durch diese id als der Name jedes <td> ist name_id (wie votes_1, snackname_1) zugreifen, da in jeder Reihe die Zahl nach dem Unterstrich der selbe ist und es gerade die Position der Reihe ist.