Dieses Mal werden wir eine asynchrone Löschfunktion mit Rails und js implementieren. Bitte beachten Sie, dass jQuery nicht zum Erlernen von einfachem js verwendet wird. Da ich ein Anfänger in der Programmierung bin, weisen Sie bitte auf Fehler hin!
Ajax wird auch als asynchrone Kommunikation bezeichnet und ist der Vorgang, bei dem nur Änderungen an den geänderten Teilen des Bildschirms vorgenommen werden, ohne den Bildschirm zu ändern. Infolgedessen wird die Ladezeit verkürzt, da kein unnötiges Rendern durchgeführt wird und Benutzer den Dienst bequem nutzen können. Übrigens zeichnet die synchrone Kommunikation den gesamten Bildschirm neu. Selbst wenn das geänderte Teil ein Teil ist, wird der gesamte Bildschirm gerendert. Es kann für den Benutzer etwas stressig sein.
Die synchrone Kommunikation wechselt nach Abschluss des Löschvorgangs zur Aktion des angegebenen Controllers und sucht nach der Datei action name.html.erb. Die asynchrone Kommunikation ist dagegen dieselbe, bis die Aktion des angegebenen Controllers ausgeführt wird. Anschließend wird nach der Datei action name.js.erb gesucht. Bitte beachten Sie den Ablauf dieser Prozesse und versuchen Sie danach zu implementieren.
<li><%= link_to 'Löschen', category_path(category.id), method: :delete, remote: true, class:'category-destroy' %></li>
Fügen Sie remote: true zur Beschreibung von link_to hinzu. Allein damit können Sie eine Anfrage vom HTML-Format zum JS-Format senden.
Durch Hinzufügen von remote: true suchen wir nach der js-Datei. Darüber hinaus können Sie mit js.erb die Ruby-Syntax in die js-Beschreibung einbetten. Diese Datei wird als Ansichtsdatei behandelt. Speichern Sie sie daher im entsprechenden Ansichtsordner. Sie übergeben die Informationen, die Sie löschen möchten, mit querySelector ("# category- <% = @ category.id%>"). Das angegebene Ziel wird mit .remove () entfernt. Mit diesen Beschreibungen können Sie bestimmte Elemente in der Ansicht löschen. Übrigens wird es aus der Datenbank gelöscht, auch wenn Sie keine js schreiben, aber Sie müssen js schreiben, da es nicht vom Bildschirm verschwindet, wenn Sie es nicht neu laden.
app/views/categories/destroy.js.erb
(function(){
document.querySelector("#category-<%= @category.id %>").remove()
})();
Damit ist die Löschfunktion durch asynchrone Kommunikation abgeschlossen! Die asynchrone Kommunikation über Schienen ist sehr einfach zu implementieren, daher sollten auch Anfänger sie unbedingt ausprobieren! Ich hoffe dieser Artikel hilft Anfängern. Bitte weisen Sie auf Fehler hin!
Recommended Posts