[RUBY] Implementierung der Kommentarfunktion (Ajax)

Ich werde es für mich selbst zusammenstellen.

Implementierung

** Controller-Modell erstellt **

routes.erb

  resources :posts do
    resources :comments, only: [:create, :destroy]
  end

Da Kommentare auf der Show-Seite von Posts veröffentlicht, aufgelistet, gelöscht usw. werden, werden nur Erstellen und Zerstören erstellt.

comments_controller.rb

class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.new(comment_params)
    @comment.user_id = current_user.id
    @comments = @post.comments.all
    @comment.save
    render :create
  end

  def destroy
    @comment = Comment.find_by(id: params[:id], post_id: params[:post_id]).destroy
    @comment.destroy
    render :destroy
  end

  private
    def comment_params
      params.require(:comment).permit(:comment, :post_id)
    end
end

Ändern Sie den Beschreibungsteil des Übergangs mit redirect_to usw. Im obigen Fall ** Erstellen Sie beim Erstellen einer Aktion create.js.erb Zerstören Sie während der Zerstörungsaktion.js.erb ** Es soll fliegen.

js.erb ist eine Datei, die später erstellt wird.

posts_controller.rb

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
    @comment = Comment.new
    @comments = @post.comments.all
  end
end

Dieses Mal können wir Kommentare zu Posts / Shows veröffentlichen

ruby:posts/show.html.slim

#Kommentarlistenanzeige
.row
  .col-lg-4
    .col-lg-4

      # create.js.Erforderlich, um mit erb umzuschreiben
      div id="comment-text"

        #Teilweise die Kommentarliste überspringen
        = render 'comments/comment', comments: @comments

    
#Kommentarformular
  .row
    .col-lg-3
    .col-lg-6.text-center
      .frame-post-show

        #lokal, um die js-Datei aufzurufen:Entfernen Sie die Beschreibung von true
        = form_with(model: [@post, @comment]) do |f|

          = f.label :comment, class: "font-weight-bold col-lg-3 text-center"
          <br>
          = f.text_area :comment, :size=>"57x5"
          <br>

          .text-center= f.submit "Kommentieren", class: "btn btn-outline-secondary btn-sm"

Erstellen Sie die Datei _comment.html.slim manuell im Kommentarverzeichnis Fügen Sie den Kommentarlistenteil ein, der im Teil übersprungen wurde.

ruby:comments/_comment.html.slim

- @comments.each do |comment|

  # destroy.js.Erforderlich, um mit erb umzuschreiben
  div id="comment-#{comment.id}"
    .frame-post-comment
      = attachment_image_tag comment.user, :image, fallback: 'noimage.png', size: "50x40", class: "mb-3"
      = link_to comment.user.name, user_path(comment.user)
      - if comment.user == current_user
      
        #remote, um die js-Datei aufzurufen:Füge true hinzu
        = link_to 'Löschen', post_comment_path(comment.post, comment), method: :delete, remote: true, data: { confirm: "Löschenしてよろしいですか？" }, class: "btn btn-outline-danger btn-sm m-0 ml-3"
      <br>
      small.m-0= comment.created_at.to_s(:datetime_jp)
      .mt-4.mb-2= comment.comment

Erstellen Sie die Datei create.js.erb manuell im Kommentarverzeichnis

ruby:comments/create.js.erb

#　id="comment-text"Teil_comment.html.Schreiben Sie schlanken Inhalt ohne Seitenübergang neu
$('#comment-text').html("<%= j(render 'comments/comment',{ comments: @comments }) %>");

# f.text_Leerer Bereich (wenn Sie ihn nicht schreiben, bleibt der Kommentar nach dem Posten auf dem Formular)
$('textarea').val('');

Erstellen Sie die Datei destroy.js.erb manuell im Kommentarverzeichnis

ruby:comments/destroy.js.erb

# "comment-#{comment.id}"Beiträge ausblenden mit
$('#comment-<%= @comment.id %>').remove();

**Komplett! ** ** **