[JAVA] So implementieren Sie eine nette Funktion in Ajax mit Rails

"So implementieren Sie eine ähnliche Funktion in Rails" führte diesmal die Implementierung einer ähnlichen Funktion ein Zeigt Ihnen, wie Sie Ajax (asynchrone Kommunikation) implementieren. Das fertige System sieht wie folgt aus. いいね_Ajax.gif



Umgebung

Annahme

Bearbeiten Sie index.html.erb

Fügen Sie remote: true </ b> zu den beiden link_to hinzu (method :: delete und method: post). Durch die Beschreibung von remote: true kann die Verarbeitung in Ajax ausgeführt werden.

html:index.html.erb


<div class="container">
  <h1>Liste der Artikel</h1>
  <table class="table">
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td>
          <% if post.liked_by?(current_user) %>
            <% like = Like.find_by(user_id: current_user.id, post_id: post.id) %>
            <%= link_to like_path(like), method: :delete, remote: true do %>
              <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: red;">
              <span><%= post.likes.count %></span>
            <% end %>
          <% else %>
            <%= link_to post_likes_path(post), method: :post, remote: true do %>
              <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: gray;">
              <span><%= post.likes.count %></span>
            <% end %>
          <% end %>
        </td>
      </tr>
    <% end %>
  </table>
</div>

Schablonieren Sie den Teil der ähnlichen Funktion

Erstellen Sie die folgende Datei im selben Verzeichnis wie index.html.erb, kopieren Sie den ähnlichen Funktionsteil und fügen Sie ihn ein.

html:_like.html.erb


<% if post.liked_by?(current_user) %>
  <% like = Like.find_by(user_id: current_user.id, post_id: post.id) %>
  <%= link_to like_path(like), method: :delete, remote: true do %>
    <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: red;">
    <span><%= post.likes.count %></span>
  <% end %>
<% else %>
  <%= link_to post_likes_path(post), method: :post, remote: true do %>
    <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: gray;">
    <span><%= post.likes.count %></span>
  <% end %>
<% end %>

Um die Teilvorlage (_like.html.erb) aufzurufen, schreiben Sie render </ b>, wo sich ein ähnlicher Funktionsteil befand. Beschreiben Sie außerdem die ID, damit Sie den Teil identifizieren können, in dem Ajax verarbeitet wird.

html:index.html.erb


<div class="container">
  <h1>Liste der Artikel</h1>
  <table class="table">
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td id="like-<%= post.id %>">  <!--Machen Sie es anhand der ID identifizierbar-->

　　　　   <%= render "like", post: post %>  <!--Rufen Sie eine Teilvorlage mit Render auf-->

        </td>
      </tr>
    <% end %>
  </table>
</div>

Controller bearbeiten

Früher habe ich am Ende jeder Aktion redirect_back ausgeführt, aber wenn ich redirect_back ausführe, wird es neu geladen und Ajax funktioniert nicht. Entfernen Sie daher redirect_back.

likes_controller.rb


  def create
    like = Like.new(user_id: current_user.id, post_id: params[:post_id])
    @post = like.post
    like.save
  end

  def destroy
    like = Like.find(params[:id])
    @post = like.post
    like.destroy
  end

Erstellen einer JS-Datei

Da wir eine Anfrage im js-Format per remote: true senden, suchen wir schließlich nach der js-Datei mit dem Aktionsnamen (erstellen oder zerstören), der ausgeführt werden soll. Erstellen Sie daher unter app / views / einen Likes-Ordner und erstellen Sie in diesem Ordner create.js.erb und destory.js.erb.

js:create.js.erb


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

js:destory.js.erb


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

Identifiziert sich durch ID und schreibt HTML teilweise neu. Dies ist abgeschlossen.

Recommended Posts