[RUBY] [Rails] [jQuery] Asynchrone Funktionsimplementierung mit remote: true und js.erb

Überblick

Beim Erstellen einer Bulletin-Board-Site im Rails-Projekt hatte ich die Möglichkeit, eine asynchrone Funktion mit "remote: true" und der "js.erb-Datei" zu implementieren. Ich werde das Verfahren hier zur Erinnerung belassen.

Annahme

Rails 5.0

Es wird davon ausgegangen, dass bereits "Favoriten-Tabelle erstellen" und "Modellzuordnung definieren" durchgeführt wurden.

Verband: users - has_many :posts, has_many :favorites posts - belongs_to :user, has_many :favorites favorites - belongs_to :user, belongs_to :post

JQuery vorbereiten

Bereiten Sie die Verwendung von jQuery in Rails vor. Stellen Sie zuerst den Edelstein vor.

Gemfile

gem 'jquery-rails'

** Bundle Install ** im Terminal. Fügen Sie dann die Beschreibung zu application.js hinzu.

application.js

# Rails5.Vor 1
//= require jquery
//= require jquery-ujs

#Version ist Rails 5.Für 1 oder später
//= require jquery
//= require rails-ujs

Dieses Mal verwende ich Rails 5.0, also bitte "erfordern" "jquery_ujs". Stellen Sie in diesem Fall sicher, dass Sie zuerst eine Abfrage benötigen.

Übrigens wird rails-ujs standardmäßig von Rails 5.1 installiert, sodass Sie es einfach in application.js benötigen können.

Routing-Einstellungen

Verwenden Sie die Post-Methode für die Aktion create und die Methode delete für die Aktion destroy, um das Routing zu beschreiben. Sie können den Namen des Präfixes angeben, indem Sie als Option schreiben: als Option.

routes.rb

  post '/favorite/:post_id' => 'favorites#create', as: 'like'
  delete '/favorite/:post_id' => 'favorites#destroy', as: 'unlike'

Favoriten_controller erstellen

Definieren Sie wie erstellen und zerstören.

app/controllers/favorites_controller.rb

class FavoritesController < ApplicationController
   before_action :set_post
   
   def create
      @favorite = Favorite.create(user_id: current_user.id, post_id: @post.id)
   end
   
   def destroy
      @favorite = Favorite.find_by(user_id: current_user.id, post_id: @post.id)
      @favorite.destroy
   end
   
   private
   
   def set_post
      @post = Post.find(params[:post_id])
   end
end

Ansicht mit Teilvorlage erstellen

Es wird zu einer Teilvorlage verarbeitet, damit es problemlos wiederverwendet werden kann.

erb:app/views/users/show.html.erb

<%= render 'posts/posts', posts: @posts %>

erb:app/views/users/_post.html.erb

<% posts.each do |post| %>


  <div id="favorite-<%= post.id %>">
    <%= render partial: "favorites/favorite", locals: { post: post } %>
  </div>
<% end %>

Um ein Ereignis mit js auszulösen, geben Sie einen Selektor mit ID oder Klasse an. Diesmal muss jedoch die ID dieses Beitrags in die ID aufgenommen werden, um zu bestimmen, welcher Beitrag Ihnen gefällt. Sie können eine ID wie id = "post-1" angeben, indem Sie wie oben schreiben.

erb:app/views/favorites/_favorite.html.erb

<% if Favorite.find_by(user_id: current_user.id, post_id: post.id) %>
  <%= link_to "Wie schön", unlike_path(post.id), method: :delete, remote: true,  class: "btn btn-default" %>
<% else %>
  <%= link_to "Wie schön", like_path(post.id), method: :post, remote: true, class: "btn btn-success" %>
<% end %>
<%= post.favorites.length %>

Fügen Sie remote: true zum Like-Button link_to hinzu. Mit dieser Beschreibung können Sie die Datei js.erb aufrufen, in der Sie normalerweise die Datei html.erb aufrufen würden, die der Aktion link_to entspricht. Daher wird die Kommunikation ohne Seitenübergang asynchron durchgeführt. Schließlich wird die Anzahl der Likes als "<% = post.favorites.length%>" angezeigt.

js.erb Dateierstellung

Erstellen Sie zunächst eine js.erb-Datei, die jeder Aktion zum Erstellen und Zerstören entspricht. app/views/favorites/create.js.erb app/views/favorites/destroy.js.erb

erb:app/views/favorites/create.js.erb

$("#favorite-<%= @post.id %>").html("<%= j(render partial: 'favorites/favorite', locals: { post: @post }) %>");

erb:app/views/favorites/destroy.js.erb

$("#favorite-<%= @post.id %>").html("<%= j(render partial: 'favorites/favorite', locals: { post: @post }) %>");

Geben Sie zunächst den Selektor an, aber geben Sie ihn so an, dass er id =" Favorit- <% = post.id%> entspricht. Verwenden Sie dann die jQuery-Methode html (), um den HTML-Code des angegebenen Selektors zu ersetzen.

Was zu ersetzen << = j (Teil rendern: 'Favoriten / Favorit', Einheimische: {post: @post})%>" Teil ruft _favorite.html.erb der Teilvorlage auf. (J vor dem Rendern ist ein Alias für Escape_Javascript, eine Methode, die Zeilenumbrüche und Klammern umgeht.)

Damit ist die Implementierung der asynchronen Like-Funktion abgeschlossen!

Schließlich

Vielen Dank, dass Sie so weit gelesen haben. Wenn Sie Fehler finden, lassen Sie es uns bitte wissen.