[RUBY] [Rails] [jQuery] Implémentation de fonction asynchrone avec remote: true et js.erb

Aperçu

Lors de la création d'un site de babillard électronique dans le projet Rails, j'ai eu l'opportunité d'implémenter une fonctionnalité asynchrone en utilisant remote: true et le fichier js.erb. Je laisserai la procédure ici pour rappel.

supposition

Rails 5.0

On suppose que "create favourites_table" et "define model association" ont déjà été effectués.

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

Préparer jQuery

Préparez-vous à utiliser jQuery dans Rails. Tout d'abord, présentez le bijou.

Gemfile

gem 'jquery-rails'

** bundle install ** dans le terminal. Ajoutez ensuite la description à ʻapplication.js`.

application.js

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

#La version est Rails 5.Pour 1 ou plus tard
//= require jquery
//= require rails-ujs

Cette fois, j'utilise Rails 5.0, donc s'il vous plaît require`` jquery_ujs. Dans ce cas, assurez-vous de ** exiger d'abord jquery **.

Au fait, rails-ujs est installé par défaut à partir de Rails 5.1, donc vous pouvez simplement l'exiger dans application.js.

Paramètres de routage

Utilisez la méthode de publication pour l'action de création et la méthode de suppression pour l'action de destruction pour décrire le routage. Vous pouvez spécifier le nom du préfixe en écrivant comme: en option.

routes.rb

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

Création de favorites_controller

Définissez comme créer et détruire.

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

Créer une vue avec un modèle partiel

Il est transformé en modèle partiel afin qu'il puisse être réutilisé facilement.

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

Pour déclencher un événement avec js, spécifiez un sélecteur avec identifiant ou classe, mais cette fois, il est nécessaire d'inclure l'identifiant de ce message dans l'identifiant pour déterminer le message que vous aimez. Vous pouvez spécifier un id comme id = "post-1" en écrivant comme ci-dessus.

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

<% if Favorite.find_by(user_id: current_user.id, post_id: post.id) %>
  <%= link_to "Comme c'est gentil", unlike_path(post.id), method: :delete, remote: true,  class: "btn btn-default" %>
<% else %>
  <%= link_to "Comme c'est gentil", like_path(post.id), method: :post, remote: true, class: "btn btn-success" %>
<% end %>
<%= post.favorites.length %>

Ajouter une télécommande: fidèle au bouton similaire link_to. Cette description vous permet d'appeler le fichier js.erb où vous appelleriez normalement le fichier html.erb qui correspond à l'action appelée link_to. Par conséquent, la communication sera effectuée de manière asynchrone sans transition de page. Enfin, le nombre de likes est affiché sous la forme <% = post.favorites.length%>.

création de fichier js.erb

Tout d'abord, créez un fichier js.erb correspondant à chaque action de création et de destruction. 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 }) %>");

D'abord, spécifiez le sélecteur, mais spécifiez-le pour qu'il corresponde à ʻid = "favorite- <% = post.id%>`. Ensuite, utilisez la méthode jQuery html () pour remplacer le html du sélecteur spécifié.

Quoi remplacer " <% = j (render partial: 'favoris / favorite', locaux: {post: @post})%> " partie appelle _favorite.html.erb du modèle partiel. (J devant render est un alias pour escape_javascript, une méthode qui échappe les sauts de ligne et les parenthèses.)

Ceci termine l'implémentation de la fonction asynchrone comme!

finalement

Merci d'avoir lu jusqu'ici. Si vous constatez des erreurs, veuillez nous en informer.