[JAVA] Like-Funktion Der Teil, der feststeckt, um es asynchron zu machen

Zielperson

Diejenigen, die die gleiche Funktion implementiert haben und in der Lage sind, eine synchrone Verarbeitung durchzuführen, und diejenigen, die sich nicht in einer asynchronen Verarbeitung verhalten Diejenigen, die nicht "zwischen geliebten und ungeliebten Zuständen wechseln können", ohne nachzuladen So installieren Sie JQuery in Rails 6 (siehe ①) und debuggen schlecht (siehe ②)

Umgebung

Rails6-Umgebung Turbolinks installiert

Zweck des Artikels

Die synchrone Verarbeitung wurde in der Like-Funktion realisiert, aber ich möchte den Teil erwähnen, der daran gehindert hat, sie asynchron zu machen.

Da es Artikel von guter Qualität über die Likes-Funktion gibt (vielleicht gibt es viele Rails 5-Umgebungen?), Möchte ich, dass Sie sich darauf stützen, und in diesem Artikel hoffe ich, dass es einen Teil gibt, der hilfreich ist, wenn Anfänger verstopft sind. Ich habe einen Artikel gemacht.

Da ich ein Anfänger bin, würde ich es auch begrüßen, wenn Sie auf Fehler hinweisen könnten.

(1) Ich habe den Unterschied zwischen der JQuery-Einführungsmethode zwischen Rails 5 und Rails 6 nicht verstanden (Umgebungseinstellungsfehler).

Die meisten derzeit veröffentlichten Artikel befinden sich in der Rails 5-Umgebung. Beachten Sie jedoch, dass sich die Einstellungsmethode in der Rails 6-Umgebung unterscheidet.

Für Schienen 5

Verwenden Sie bis zur Rails5-Serie "Asset-Pipeline", um JavaScript zu verwalten.

gem 'jquery-rails'

application.js

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

Durch die Einführung von jquery-Rails wie oben beschrieben kann JQuery für die Entwicklung von Rails-Anwendungen verwendet werden. Fordern Sie dann JQuery für eine Manifestdatei wie app / assets / javasctipts / application.js an. Obwohl ich Rails 6 installiert hatte, schrieb ich es in dieser Rails 5-Methode. Bitte lesen Sie den Artikel, in dem Sie die Version von Rails beachten, die nicht auf diesen Teil beschränkt ist.

Für Schienen 6

In Rails 6 oder höher wird es von einer Funktion namens "Webpacker" verwaltet. In meinem Fall war der Speicherort von application.js app / javascript / packs / application.js.

application.js

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

In Bezug auf die Einführung habe ich auf den folgenden Artikel verwiesen. https://techtechmedia.com/jquery-webpacker-rails/ Darüber hinaus wird in diesem Artikel auch erläutert, wie Sie environment.js bearbeiten und die Einführung von JQuery überprüfen. Ich werde im Folgenden darauf eingehen, wie die Einführung von JQuery bestätigt werden kann.

So überprüfen Sie die Einführung von JQuery

Fügen Sie den folgenden Code in application.js und ein

application.js

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

Console.log ($ .fn.jquery) wurde zur js.erb-Datei hinzugefügt, die von einer Javascript-Anforderung mit remote: true description aufgerufen wurde.

create.js.erb

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

Anschließend wird die Version von JQuery im Konsolenteil der Entwicklertools angezeigt. Beachten Sie, dass dies ein Ort ist, den Sie bei der Implementierung der asynchronen Verarbeitung in JavaScript überprüfen sollten. Wenn die Version im Konsolenteil wie "3.5.1" angezeigt wird, bedeutet dies, dass die Installation abgeschlossen wurde.

(2) Ich habe den Fehler in der Variablendefinition nicht bemerkt (ich habe das Fehlerprotokoll nicht mit Rails s überprüft).

create.js.erb

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

Ich habe falsch verstanden, dass es keinen Fehler gab, aber ich habe die Protokollausgabe von Rails s nicht überprüft. Als ich die Schaltfläche "Gefällt mir" drückte, wurde das Protokoll der Schienen ausgegeben, und ganz am Ende wurde eine Fehlermeldung angezeigt, wenn die ID nicht definiert war. Das Schienenprotokoll ist wie folgt.

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

(Kürzung)
・
.
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 })%>");

Unten ist ein Fehler aufgetreten. In meinem Fall hat create.js.erb einschließlich @review nicht funktioniert und sich nicht asynchron verhalten, da bei der Definition von @review im Controller ein Fehler aufgetreten ist und der Wert nicht eingegeben wurde. Nach dem ordnungsgemäßen Debuggen (korrekte Definition von Variablen) für diesen Fehler wurde das Problem behoben, dass das "Umschalten zwischen dem Status" Gefällt mir "und dem Zustand" Nicht gemocht "nicht ohne erneutes Laden durchgeführt werden konnte, und das Verhalten der asynchronen Verarbeitung wurde geändert. Ich konnte es realisieren.

Ich hoffe, es ist hilfreich für diejenigen, die in einer ähnlichen Umgebung / einem ähnlichen Teil festsitzen.