[RUBY] Rails Lerntag 4

Ruby on Rails Schnelllernhandbuch Kapitel 8

8-2 Kommunizieren Sie mit Ajax mit dem Rails-Server

Ajax: Eine Javascript-Programmiermethode für die asynchrone Kommunikation in einem Webbrowser und das Aktualisieren einer Seite, ohne die Seite neu zu laden.

Selbst wenn die Seite durch Empfangen einer Anforderung vom Server aktualisiert wird, werden normalerweise jedes Mal, wenn es sich um eine etwas andere Seite handelt, alle Teile der Seite jedes Mal von 1 gelesen und angezeigt. Wenn Sie jedoch Ajax verwenden, wird nur der Teil dynamisch verarbeitet. Verwendet die Seite so wie sie ist, ohne den Server zu durchlaufen

Dieses Mal wird der Vorgang des Löschens der Aufgabe mit Ajax verarbeitet. Es gibt zwei Hauptoperationen, die von der Ajax-Verarbeitung ausgeführt werden.

① Vorgang zum Löschen einer Aufgabe. (2) Vorgang zum Anzeigen des Listenbildschirms, der die gelöschte Aufgabe widerspiegelt.

Schreiben Sie diese beiden Codes.

Löschen Sie die Aufgabe von ①. Aber ohne Server geht das nicht, deshalb benutze ich einen Server mit Ajax. Um die Aufgabe von ① zu löschen, müssen Sie ❶ Ajax verwenden, um aus der Ansicht zur Löschaktion zu springen, und ❷ die Löschaktion für Ajax neu schreiben.

❶ So überspringen Sie den Link zur Löschaktion mit Ajax

Code vor Änderung

ruby:app/views/tasks/index.html.slim

=link_to 'Löschen', task, method: :delete, data:{confirm: "Aufgabe"#{task.name}」をLöschenします。よろしいですか？"},class: 'btn btn-danger'

Code nach Änderung

ruby:app/views/tasks/index.html.slim

=link_to 'Löschen', task, method: :delete, remote: true, data:{confirm: "Aufgabe"#{task.name}」をLöschenします。よろしいですか？"},class: 'btn btn-danger'

Um die Ajax-Funktion zu verwenden, geben Sie einfach remote: true ein.

❷ Löschaktion für Ajax neu schreiben

Code vor Änderung

app/controller/tasks_controller.rb

def destroy
  @task.destroy
  redirect_to tasks_url, notice: "Aufgabe"#{@task.name}Wurde gelöscht"
end

Code nach Änderung

app/controller/tasks_controller.rb

def destroy
  @task.destroy
  head :no_content
end

Es ist gut, das Ding, das nicht durch den Server gehen muss, durch den Betrieb des Controllers mit Ajax zu ersetzen. Diesmal habe ich die Methode redirect_to ersetzt. Da die Methode redirect_to die Route durchläuft, die einmal über den Server an den Browser übertragen wird, wird sie ohne Ajax wiedergegeben. Wenn Sie stattdessen head: no_content schreiben, können Sie eine Antwort erhalten, dass das Löschen erfolgreich ist, ohne den Server zu durchlaufen.

② Vorgang zum Anzeigen des Listenbildschirms, der die gelöschte Aufgabe widerspiegelt.

Bedienen Sie den Listenbildschirm mit einem Ereignishandler. Was ist ein Event-Handler? Eine Zwischenposition, die eine Opportunity erhält und eine gewisse Verarbeitung durchführt.

Fügen Sie zunächst eine Löschklasse hinzu, um das Verständnis zu erleichtern, indem Sie nur den Auslöser betrachten, der das Ziel des Ereignishandlers ist.

ruby:app/views/tasks/index.html.slim

=link_to 'Löschen', task, method: :delete, remote: true, data:{confirm: "Aufgabe"#{task.name}」をLöschenします。よろしいですか？"},class: 'btn btn-danger delete'

Verwenden Sie dann die Löschklasse, um den Ereignishandler und die auszuführende Aktion zu schreiben

app/assets/javascript/tasks.js

document.addEventListener('turbolinks:load', function(){
  document.querySelectorAll('.delete').forEach(function(a){
    a.addEventListener('ajax:success', function(){
      var td = a.parentNode;
      var tr = td.parentNode;
      tr.style.display = 'none';
    });
  });
});

8-2-3 Geben Sie Javascript vom Controller zurück und führen Sie es aus

Oben wurde die Aufgabe auf dem Server gelöscht und die Ansicht von Javascript im vorbereiteten Ereignishandler geändert. Es gibt jedoch ein anderes Operationsmuster, das das gleiche Ergebnis liefert.

So übergeben Sie die Informationen "Bitte löschen" aus dem Browser an den Server. Diesmal gibt der Server eine Antwort mit Javascript zurück. Der Server beurteilt die gelöschte Aufgabe (SJR genannt) anhand des ID-Elements und gibt zum Zeitpunkt der Antwort die Javascript-Operation "Aufgabe mit dieser ID löschen" zurück.

Der Server fügt zunächst ein dediziertes ID-Element hinzu, um herauszufinden, welche Aufgaben gelöscht wurden

ruby:app/views/tasks/index.html.slim

table.table.table-default
...
tbody
  - @task.each do |task|
    tr id="task-#{task.id}"
      td= link_to task.name, task
      ...

Ich habe ein dediziertes ID-Element namens id = "task- # {task.id}" erstellt.

Erstellen Sie eine Datei app / views / task / destroy.js.erb, die der Zerstörungsaktion entspricht, und schreiben Sie dort die gewünschte js-Operation vom Server.

ruby:app/views/tasks/destroy.js.erb

document.querySelector("#task-<%= @task.id%>").style.display = 'none'

Damit kommt der Betrieb von js mit der Antwort vom Server Löschen Sie abschließend das redirect_to der Zerstörungsaktion

app/controller/tasks_controller.rb

def destroy
  @task.destroy
end

8-3　Turbolinks Turbolinks: Beschleunigung durch automatisches Ajaxing von Seitenübergängen für alle Linkklicks

8-4-2-2 Ausführung der Kompilierung

Kompilieren: Dateien, die vom Computer ausgeführt werden können, werden verbalisiert, damit der Computer sie leicht verstehen kann. Es wird vom Menschen nicht verstanden. Die Datei muss jedoch von Menschen erstellt werden. Zu diesem Zeitpunkt müssen Sie zunächst eine Datei in einer Sprache erstellen, die Menschen verstehen können, und sie automatisch in eine Sprache ändern, die für einen Computer leicht zu verstehen ist. Rufen Sie diese Operation compile auf