如何使用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意味着創建添加到其他意見的評論，那就是創建的評論是不第一。在這種情況下，var comments不爲空，最後一行代碼將註釋附加到其他註釋的列表中。
此外，如果micropost.comments不爲零，用戶可以使用「顯示/隱藏評論」鏈接，切換與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?是假的，var comments既不null或undefined，但被認爲是一個空數組，可以通過使用Web瀏覽器控制檯進行驗證。因此使用if (comments.length == 0)。請參閱Stackoverflow上的post。