創建后如何使用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不為null，並且代碼的最后一行將注釋附加到其他注釋的列表中。
另外，如果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

我按照Minu最初建議的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 ，但是可以視為空數組，可以使用網絡瀏覽器控制台進行驗證。 因此，使用if (comments.length == 0) 。 請參閱Stackoverflow上的帖子 。