[RAILS] J'ai essayé d'implémenter la fonction similaire par communication asynchrone

introduction

De nombreux articles ont déjà été publiés, mais j'aimerais les rédiger comme un mémorandum de ma part.

Avantages de la communication asynchrone

En apprenant personnellement "pourquoi la technologie est utilisée" en premier lieu, Je pense que c'est rapide à comprendre car le but est clair.

1. Seule une partie de la page peut être mise à jour sans changer la page.

Pour être honnête, je pense que c'est assez ennuyeux si la page est modifiée à chaque fois que vous l'aimez. Cependant, en utilisant la communication asynchrone, vous pouvez commenter, aimer et modifier les utilisateurs sans passer par les transitions __page! __

La mise en oeuvre!

Étape ① Envoyez une demande de format JS au serveur

Premièrement, s'il ne s'agit pas d'une communication asynchrone, le terminal au moment de l'exécution similaire se comporte comme suit. Le format de la demande est affiché dans la partie du cercle rouge de l'image. Dans ce cas, cela signifie que la communication est au format HTML!

Je veux mettre ça au format JS ...!

views:_favorites.html.erb

<%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>

De cette façon, vous pouvez envoyer une demande de format JS en ajoutant remote: true au lien du bouton like.

Étape ② Créez un modèle partiel pour le bouton similaire

Afin de mettre en œuvre une communication asynchrone, les modifications doivent être des modèles partiels. Plus précisément, préparez une boîte "j'aime" que vous souhaitez mettre à jour partiellement, C'est une image qui change l'affichage selon que vous l'aimez ou non.

views:views/posts/_favorites.html.erb

  <% if post.favorited_by?(current_user) %>
    <%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>
      <span class="btn btn-danger">Aimez-le</span>
    <% end %>
  <% else %>
    <%= link_to post_favorites_path(post), method: :POST, remote: true do %>
      <span class="btn btn-primary">Comme</span>
    <% end %>
  <% end %>

Créez un modèle partiel views / posts / _favorites.html.erb, Déplacez la partie bouton similaire ici. Appelez ensuite le modèle partiel créé précédemment dans le fichier index.html d'origine.

views:views/posts/index.html.erb

<div class="main_contents">
    <% @posts.each do |post| %>
        <div class="post_contents">
          <h2><%= link_to post.title, post_path(post.id) %></h2>
          <%= post.content %>

         <!--↓ Ajouter(Où vous souhaitez mettre à jour partiellement)↓ -->
          <div id="favorite-<%= post.id %>">
             <%= render 'posts/favorites', post: post %>
          </div>
         <!--↑ Jusqu'ici ↑-->
        </div>
  <% end %>
</div>

Étape ③ Créez un fichier js.erb

Pour les demandes au format HTML, le fichier de vue est views / nom du contrôleur / nom de l'action.html.erb Appelez le fichier de.

Cependant, pour les demandes au format JS, views / nom du contrôleur / nom de l'action.js.erb Appelez le fichier de.

Cette fois, j'implémente la fonction similaire en utilisant les actions de création et de destruction du contrôleur de favoris. views / favoris / create.js.erb et views / favoris / destroy.js.erb Créez un fichier.

ruby:views/favorites/create.js.erb

 #id="favorite-<%= @post.id %>"C'est un processus pour mettre à jour partiellement uniquement le HTML de cette partie avec rendu
$("#favorite-<%= @post.id %>").html("<%= j(render 'posts/favorites',  post: @post ) %>");

ruby:views/favorites/destroy.js.erb

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

Étape ④ Supprimer la redirection du contrôleur

controllers/favorites_controller.rb

    def create
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.build(post_id: @post.id)
      favorite.save
      redirect_to root_path #← Supprimer cette ligne
    end

    def destroy
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.find_by(post_id: @post.id)
      favorite.destroy
      redirect_to root_path #← Supprimer cette ligne
    end

Achevée!

Avec la procédure ci-dessus, vous pouvez implémenter la désynchronisation de la fonction similaire!

référence

Ajax (communication asynchrone) est résumé avec un accent sur la compréhensibilité (avec une démo utilisant Rails)