それぞれ複数のコメントを表示するレール

Question

私のプロジェクトにはコメントがあり、それらを3つに表示したいのですが、残りのコメントも3つのリンクで表示したいと考えています。ボタンをクリックしたときにコメントを表示し続けるように、部分をレンダリングするにはどうすればよいですか？助けてくれ

ポスト/ _comments.html.haml

.container 
    .row.news 
    .col-sm-12.news{id: "post-comments-#{post.id}"} 
    %h2 Users Comments 
    - post.comments.order(:created_at).last(3).each do |comment| 
    = render 'posts/comment', comment: comment 
.news 
    %h5 Add a comment: 
    = form_for [post, post.comments.build], remote: true do |f| 
    %p 
     = f.text_area :text 
    %p 
     = f.submit 

ポスト/ _comment.html.haml

.row.news-coment 
    .col-sm-2 
    %img= image_tag comment.user.avatar.url 
    .col-sm-5 
    .panel.panel-default 
     .panel-heading 
     %strong= link_to("#{comment.user.first_name} #{comment.user.second_name}", user_path(comment.user)) 
     %span.text-muted #{comment.created_at.strftime('%-d %B %Y, %H:%M:%S')} 
    .panel-body 
     = comment.text 

コメント/ create.js.haml

$("#post-comments-#{@post.id}").append("#{escape_javascript render('posts/comment', comment: @comment)}"); 

Answer 1

あなたの場合フォームを通じてpost.commentを作成し、remote：trueオプションを追加すると、コントローラにjs形式で応答するように指示する必要があります。私はそれはあなたがすでに作成jsファイルを作成したと思います。

あなたは、多分post.commentsコンテナを作成し、作成したコメントを追加するような何か必要があります。

#posts-container 
    - post.comments.order(:created_at).last(3).each do |comment| 
    = render 'posts/comment', comment: comment 

をそして、あなたのcreate.jsファイルはほとんど準備ができている：

$("#post-container").append("#{escape_javascript render('posts/comment', comment: @comment)}"); 

念

... 
    if @comment.save 
    format.html { } 
    format.js { } 

のように、コントローラメソッドからhtmlとjs形式で応答する

---

ボタンをクリックしたときにコメントを追加するには、次の手順を試してください。

最後のものに応じて次の3つのコメントをロードできるメソッドを現在のコントローラに作成します。注

def load_comments 
    @comments = Comment.order(created_at: :desc).where('id < ?', params[:comment_id]).limit(3) 
    respond_to :js 
end 

：取るあなたは値が渡されるよりも、idは軽微であり、それらの要素を求めると、わずか3を取る、のような、彼らのはcreated_at属性（またはものは何でもしたい）に応じて、コメントを注文しますlimitとtakeの違いを見てください。その後

、のように、あなたの要求に応えるためにGETルートを作成します。同様に、最後のcomment.idを渡して要求を行いますtrueオプション：

その後、リモートでlink_toを作成

get 'load_comments', to: 'posts#load_comments' # posts was my controller, your can be anything 

<%= link_to 'Load More', load_comments_path(comment_id: @comments.last.id), remote: true, class: 'load-more' %> 

注@commentsのActiveRecordRelationshipの最後のコメントからIDを取得していますので、現在のコントローラーであなたのケースでも定義する必要があります。link_toがリクエストをする準備ができて、あなたはこのようにそれを行うことができ、クエリを作るために最後のコメントからIDを設定する必要があなたのビューで

、：

<script> 
    document.querySelector('.load-more').href = '/load_comments?comment_id=' + '<%= @comments.last.id %>' 
</script> 

そして最後に、あなたのload_comments.js.erbこれと同様に、各comment上のメソッド繰り返し処理に応答して、それをレンダリングする：また再び要求をする最後のコメントのIDを設定します

<% @comments.each do |comment| %> 
    $("#comments-table").append('<%= j render "comments/comment", comment: comment %>') 
<% end %> 
document.querySelector('.load-more').href = '/load_comments?comment_id=' + '<%= @comments.last.id %>' 

。

マイ_comment.html.erbファイルは、単に次のようになります。

<tr> 
    <td><%= comment.text %></td> 
    <td><%= comment.post.id %></td> 
</tr> 

は、それはあなたのお役に立てば幸いです。