（Rails）元素创建/销毁和空白状态的 AJAX 列表答案

【问题标题】：(Rails) AJAX list of elements create/destroy and blank states（Rails）元素创建/销毁和空白状态的 AJAX 列表
【发布时间】：2017-10-27 10:51:36
【问题描述】：

我有一个以相当正常的表格方式显示的记录列表（使用 Rails，因此使用 Ruby 语法）。这本身不是“Rails”问题，而是一般做法：

<div class="list" id="records">
  <% if @records.empty? %>
    <%= render "blank_state" %>
  <% else %>
    <% @records.each do |record| %>
      <%= link_to record.name, record_path(record), class: "list-item", id: record.id %>
    <% end %>
  <% end %>
</div>

我正在使用 AJAX (jQuery) 向列表添加/删除记录。

# create.js.erb
$("#records-blank-state").remove(); # In case first record
$("#records").append("<%=j render(partial: "record", locals: { record: @record }) %>");

# destroy.js.erb
$("#<%= @record.id %>").remove();
<% if Record.count.zero? %>
  $("#records").html("<%=j render(partial: "blank_state") %>");
<% end %>

# _blank_state.html.erb
<div class="blank-state" id="records-blank-state">
  There are no records
</div>

如您所见，如果没有任何记录，我最初会显示 blank_state 部分，但是当我使用 AJAX 添加记录时，我想确保 blank_state 消失。

删除记录时我也会这样做，只是反过来：如果我刚刚删除了最后一条记录，我需要确保将 blank_state 部分放回原位。

除了在创建/销毁时检查计数之外，还有更好的方法吗？

我试图查看是否有一种方法可以让 CSS 始终将 blank_state 留在页面上，但仅在记录列表为空时才显示它，但没有成功。

这种情况的标准解决方案是什么？

【问题讨论】：

标签： jquery html ruby-on-rails ajax

【解决方案1】：

在这种情况下，我喜欢做的是只创建一个部分来处理整个逻辑。

在你看来：

<div class="list" id="records">
  <%= render "records", records: @records %>
</div>

在你的部分：

<% if @records.empty? %>
  <div class="blank-state">There are no records</div>
<% else %>
  <% @records.each do |record| %>
    <%= link_to record.name, record_path(record), class: "list-item" %>
   <% end %>
<% end %>

然后在你的 js 视图中你可以这样做：

# create.js.erb
$("#records").html("<%= j render "records", records: @records %>");

# destroy.js.erb
$("#records").html("<%= j render "records", records: @records %>");

因此，您甚至可以为这两个操作呈现相同的视图。

希望对你有帮助

【讨论】：