[JAVA] Fonction similaire La partie bloquée pour la rendre asynchrone

Personne cible

Ceux qui ont implémenté la fonction similaire et sont capables d'effectuer un traitement synchrone, et ceux qui ne se comportent pas en traitement asynchrone Ceux qui ne peuvent pas "basculer entre les états" aimé et non "sans recharger Comment installer JQuery dans Rails 6 (voir ①) et comment mal déboguer (voir ②)

environnement

Environnement Rails6 Turbolinks installés

Objet de l'article

Le traitement synchrone a été réalisé dans la fonction similaire, mais je voudrais noter la partie qui a été bloquée en le rendant asynchrone.

Puisqu'il existe des articles de bonne qualité sur la fonction likes (peut-être qu'il existe de nombreux environnements Rails 5?), J'aimerais que vous vous basiez sur cela, et dans cet article j'espère qu'il y a une partie qui sera utile lorsque les débutants seront bloqués. J'ai fait un article.

De plus, comme je suis débutant, j'apprécierais que vous signaliez des erreurs.

(1) Je n'ai pas compris la différence entre la méthode d'introduction JQuery entre Rails 5 et Rails 6 (erreur de configuration d'environnement)

La plupart des articles actuellement publiés sont dans l'environnement Rails 5, mais veuillez noter que la méthode de paramétrage est différente dans l'environnement Rails 6.

Pour Rails 5

Jusqu'à la série Rails5, utilisez le «pipeline d'actifs» pour gérer JavaScript.

gem 'jquery-rails'

application.js

//= require jquery
//= require rails-ujs

En introduisant jquery-rails comme décrit ci-dessus, JQuery peut être utilisé pour le développement d'applications Rails. Ensuite, exigez JQuery sur un fichier manifeste tel que app / assets / javasctipts / application.js. Même si j'avais Rails 6 installé, je l'ai écrit dans cette méthode Rails 5. Veuillez vous référer à l'article en faisant attention à la version de Rails, non limité à cette partie.

Pour Rails 6

Dans Rails 6 ou supérieur, il est géré par une fonction appelée "Webpacker". Dans mon cas, l'emplacement de application.js était app / javascript / packs / application.js.

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require('jquery')

En ce qui concerne l'introduction, je me suis référé à l'article suivant. https://techtechmedia.com/jquery-webpacker-rails/ En outre, cet article explique également comment modifier environment.js et vérifier l'introduction de JQuery. Je vais aborder la façon de confirmer l'introduction de JQuery ci-dessous.

Comment vérifier l'introduction de JQuery

Mettez le code suivant dans application.js et

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require('jquery')
document.addEventListener("turbolinks:load", () => {
   console.log($.fn.jquery)
})

Ajout de console.log ($ .fn.jquery) au fichier js.erb appelé par une requête Javascript avec remote: true description.

create.js.erb

console.log($.fn.jquery)
$("#like_<%= @review.id%>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");

Ensuite, la version de JQuery sera affichée dans la partie console des outils de développement. Gardez à l'esprit qu'il s'agit d'un endroit à vérifier lors de l'implémentation d'un traitement asynchrone en JavaScript. Si la version s'affiche comme "3.5.1" dans la partie console, cela signifie que l'installation est terminée.

(2) Je n'ai pas remarqué l'erreur dans la définition de la variable (je n'ai pas vérifié le journal des erreurs par rails s)

create.js.erb

$("#like_<%= @review.id%>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");

J'ai mal compris qu'il n'y avait pas d'erreur, mais je n'ai pas vérifié la sortie du journal par rails s. Lorsque j'ai appuyé sur le bouton like, le journal des rails était sorti, et à la toute fin, j'ai eu une erreur si l'id n'était pas défini. Le journal des rails est le suivant.

Started POST "/books/2/reviews/3/likes" for ::1 at 2020-10-24 09:41:59 +0900
Processing by LikesController#create as JS
・
.

(réduction)
・
.
ActionView::Template::Error (undefined method `id' for nil:NilClass):
    1: $("#like_<%= @review.id %>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");

Il y a une erreur en bas. Dans mon cas, create.js.erb incluant @review ne fonctionnait pas et ne se comportait pas de manière asynchrone car il y avait une erreur dans la définition de @review dans le contrôleur et il ne contenait pas de valeur. Après un débogage approprié (définition correcte des variables) pour cette erreur, le problème selon lequel «basculer entre l'état aimé et l'état non aimé» ne pouvait pas être effectué sans rechargement a été résolu, et le comportement du traitement asynchrone a été modifié. J'ai pu m'en rendre compte.

J'espère que cela sera utile pour ceux qui sont coincés dans un environnement / une pièce similaire.