javascript - 如何使用 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 不为 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) %>');
};