[RUBY] Rails Learning jour 4

Ruby on Rails Guide pratique d'apprentissage rapide chapitre 8

8-2 Communiquer avec le serveur Rails avec Ajax

Ajax: Une méthode de programmation Javascript pour une communication asynchrone sur un navigateur web et rafraîchir une page sans recharger la page.

Normalement, même si la page est mise à jour en recevant une requête du serveur, même s'il s'agit d'une page légèrement différente, toutes les parties de la page sont lues et affichées à partir de 1 à chaque fois, mais si vous utilisez Ajax, seule la partie est traitée dynamiquement. Utilise la page telle quelle sans passer par le serveur

Cette fois, le processus de suppression de la tâche sera traité à l'aide d'Ajax. Il existe deux opérations principales effectuées par le traitement Ajax.

① Opération pour supprimer une tâche. (2) Opération pour afficher l'écran de liste qui reflète la tâche supprimée.

Écrivez ces deux codes.

Supprimez la tâche de ①. Mais cela ne peut rien faire sans serveur, j'utilise donc un serveur avec Ajax. Pour supprimer la tâche de ①, vous devez utiliser ❶ Ajax pour passer à l'action de suppression de la vue, et ❷ réécrire l'action de suppression pour Ajax.

❶ Comment ignorer le lien vers l'action de suppression avec Ajax

Code avant changement

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

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

Code après modification

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

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

Pour utiliser la fonction Ajax, entrez simplement remote: true.

❷ Réécrire l'action de suppression pour Ajax

Code avant changement

app/controller/tasks_controller.rb

def destroy
  @task.destroy
  redirect_to tasks_url, notice: "tâche"#{@task.name}A été supprimée"
end

Code après modification

app/controller/tasks_controller.rb

def destroy
  @task.destroy
  head :no_content
end

Il est bon de remplacer la chose qui n'a pas besoin de passer par le serveur en faisant fonctionner le contrôleur avec Ajax. Cette fois, j'ai remplacé la méthode redirect_to. Puisque la méthode redirect_to passe par la route qui est reflétée au navigateur une fois via le serveur, elle est reflétée sans passer par Ajax. En écrivant head: no_content à la place, vous pouvez obtenir une réponse indiquant que la suppression est réussie sans passer par le serveur.

② Opération pour afficher l'écran de liste qui reflète la tâche supprimée.

Utilisez l'écran de liste à l'aide d'un gestionnaire d'événements. Qu'est-ce qu'un gestionnaire d'événements? Une position intermédiaire qui reçoit une opportunité et effectue un certain traitement.

Tout d'abord, ajoutez une classe de suppression pour faciliter la compréhension en regardant simplement le déclencheur qui est la cible du gestionnaire d'événements.

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

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

Utilisez ensuite la classe delete pour écrire le gestionnaire d'événements et l'action à exécuter

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 Renvoyer le Javascript du contrôleur et l'exécuter

Dans ce qui précède, la tâche a été supprimée sur le serveur et la vue a été modifiée par Javascript dans le gestionnaire d'événements préparé. Cependant, il existe un autre modèle d'opérations qui produit le même résultat.

Comment transmettre les informations «Veuillez supprimer» du navigateur au serveur, et cette fois le serveur renvoie une réponse contenant du Javascript. Le serveur juge la tâche supprimée (appelée SJR) par l'élément id, et renvoie l'opération Javascript "Supprimer la tâche avec cet identifiant" au moment de la réponse.

Attachez d'abord un élément d'identifiant dédié au serveur pour déterminer quelle tâche a été supprimée

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

J'ai créé un élément d'identification dédié appelé id = "task- # {task.id}".

Créez un fichier app / views / tasks / destroy.js.erb correspondant à l'action destroy et écrivez l'opération js souhaitée à partir du serveur.

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

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

Avec cela, le fonctionnement de js est accompagné de la réponse du serveur Enfin, supprimez le redirect_to de l'action de destruction

app/controller/tasks_controller.rb

def destroy
  @task.destroy
end

8-3　Turbolinks turbolinks: accélération en ajustant automatiquement les transitions de page pour tous les clics sur les liens

8-4-2-2 Exécution de la compilation

Compiler: les fichiers qui peuvent être exécutés par l'ordinateur sont verbalisés afin que l'ordinateur puisse les comprendre facilement. Il n'est pas compris par les humains. Mais le fichier doit être créé par des humains. À ce moment-là, tout d'abord, vous devez créer un fichier dans une langue que les humains peuvent comprendre et le changer automatiquement dans une langue facile à comprendre pour un ordinateur. Appelez cette opération compile