Question

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

<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，但只在记录列表为空时显示它，但是还没有成功。

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

Answer 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 %>");

所以你甚至可以为两个动作渲染相同的视图。

希望有所帮助

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

1 个答案: