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时写入评论），则无法在不刷新页面的情况下查看结果。< / p>

所以我问：如何编辑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上的post。

如何使用Ajax在创建后立即显示第一条评论

2 个答案: