Ajaxを使用して、最初に唯一のコメントを作成する方法

Question

現在のところ、私のアプリケーションでは、既にコメントがあるマイクロポストにコメントを追加することができます。以下は（簡体字）_micropost.html.erbです：

<li id="micropost-<%= micropost.id %>"> 
    <span class="content"> 
    <%= micropost.content %> 
    </span> 
    <span class="timestamp"> 
    Posted <%= time_ago_in_words(micropost.created_at) %> ago. 
     ~ <%= link_to "Comment", "#", class: "comment-link", remote: true %> 
    <% if micropost.comments.any? %> 
     ~ <%= link_to "Show/hide comments", "#", class: "comments-link", remote: true %> 
    <% end %> 
    </span> 
    <% if logged_in? && (current_user == micropost.user || current_user.friend?(micropost.user)) %> 
    <div class="comment-section"> 
     <%= form_for(current_user.comments.build, remote: true) do |f| %> 
     <%= f.hidden_field :micropost_id, value: micropost.id %> 
     <%= f.text_area :content, rows: "1", class: "comment_area" %> 
     <%= f.submit "Comment", class: "btn btn-primary btn-sm" %> 
     <% end %> 
    </div> 
    <% end %> 
    <div class="comments-section"> 
    <% if micropost.comments.any? %> 
     <ol id="comments_micropost-<%= micropost.id %>"> 
     <% micropost.comments.each do |comment| %> 
      <%= render comment %> 
     <% end %> 
     </ol> 
    <% end %> 
    </div> 
</li> 

create.js.erbは次のとおりです。

var comments = $('ol#comments_micropost-<%= @micropost.id %>'); 
comments.append('<%= escape_javascript(render partial: @comment) %>'); 

それは考えていると、create.js.erbが作成したコメントが他のコメントに追加されたことを意味し、それが作成されたコメントではないということです最初の1つ。この場合、var commentsはnullではなく、コードの最後の行がコメントを他のコメントのリストに追加します。
また、ケースmicropost.commentsにはnilでない、ユーザーはid="comments_micropost-<%= micropost.id %>"

で順序リストを切り替えるには、「表示/非表示のコメント」リンクを使用することができます。この設定に問題が場合には、ユーザーがいずれかに追加することです最初のコメントをマイクロポストしてください（つまり、ユーザーはmicropost.comments == 0のときにコメントを書き込みます）。ページを更新せずに結果を見る機会はありません。

create.js.erbを編集して最初のコメントを投稿した結果をすぐに見ることができ、「コメントの表示/非表示」リンクをページに追加するにはどうすればよいですか？

私は、次のコードを試してみましたが、それは動作しません：

if (comments !== null) { 
    comments.append('<%= escape_javascript(render partial: @comment) %>'); 
} else { 
     $('#micropost-<%= @micropost.id %>').find('.comments-section').append("<ol id='comments_micropost-<%= @micropost.id %>'><%= escape_javascript(render partial: @comment) %></ol>"); 
     $('#micropost-<%= @micropost.id %>').find('.timestamp').append(" ~ <%= link_to 'Show/hide comments', '#', class: 'comments-link', remote: true %>"); 
}; 

Answer 1

<li id="micropost-<%= micropost.id %>"> 
    <span class="content"> 
    <%= micropost.content %> 
    </span> 
    <span class="timestamp"> 
    Posted <%= time_ago_in_words(micropost.created_at) %> ago. 
     ~ <%= link_to "Comment", "#", class: "comment-link", remote: true %> 
    <% if micropost.comments.any? %> 
     ~ <%= link_to "Show/hide comments", "#", class: "comments-link", remote: true %> 
    <% end %> 
    </span> 
    <% if logged_in? && (current_user == micropost.user || current_user.friend?(micropost.user)) %> 
    <div class="comment-section"> 
     <%= form_for(current_user.comments.build, remote: true) do |f| %> 
     <%= f.hidden_field :micropost_id, value: micropost.id %> 
     <%= f.text_area :content, rows: "1", class: "comment_area" %> 
     <%= f.submit "Comment", class: "btn btn-primary btn-sm" %> 
     <% end %> 
    </div> 
    <% end %> 
    <div class="comments-section"> 
    <%= render partial: comments, micropost: micropost %> 
    </div> 
</li>  

そして_comments.html.erbで

<% if micropost.comments.any? %> 
    <ol id="comments_micropost-<%= micropost.id %>"> 
    <% micropost.comments.each do |comment| %> 
     <%= render comment %> 
    <% end %> 
    </ol> 
<% end %> 

そしてcreate.js.erb

var comments = $('ol#comments_micropost-<%= @micropost.id %>'); 
if (comments == undefined) { 
    $('div#comments-section').html('<%= escape_javascript(render partial: comments, micropost: @micropost) %>'); 
} 
else { 
    comments.append('<%= escape_javascript(render partial: @comment) %>'); 
}; 

で

Answer 2

私が最初に提案したように問題を解決しました次のようにぬことでapp/views/comments/_comments.html.erbファイルを編：次のように

<% if @micropost.comments.any? %> 
    <ol id="comments_micropost-<%= @micropost.id %>"> 
    <% @micropost.comments.each do |comment| %> 
     <%= render comment %> 
    <% end %> 
    </ol> 
<% end %> 

部分_micropost.html.erbを変更することなく、私はcreate.js.erb編集：

var comments = $('ol#comments_micropost-<%= @micropost.id %>'); 

if (comments.length == 0) { 
    $('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/comments') %>"); 
} 
else { 
    comments.append('<%= escape_javascript(render partial: @comment) %>'); 
}; 

をmicropost.comments.any?がfalseの場合、var commentsがnullまたはundefinedでもないですが、ANと考えられています空の配列で、Webブラウザコンソールを使用して検証できます。したがって、if (comments.length == 0)の使用。 Stackoverflowのpostを参照してください。