如何删除，“删除”如果表单字段是带有 Nested_Form gem 的页面上的第一个表单字段，请链接？

Question

我正在使用nested_form gem，它允许用户动态添加和删除表单字段。它工作正常，但我希望能够阻止用户删除第一个 file_field，并且仅在用户添加的字段时才显示“删除”链接。我的“_form”和“_photo_fields”部分如下。我认为解决方案是执行类似“如果该字段不是页面上该类型的第一个字段，则显示“删除”链接”之类的操作，但我不确定如何实现这一点。感谢您提供的任何见解。

_form.html.erb：

<%= simple_nested_form_for @service_offering do |f|%>

... Other Fields ...

<%= f.fields_for :photos do |builder| %>
    <%= render 'photo_fields', :f => builder %>
<%end%>

<%= f.button :submit %>

<p><%= f.link_to_add "Add Photo", :photos %></p>    

_photo_fields.html.erb：

<% if f.object.new_record? %>

<%= f.label :photo %>  
<%= f.file_field :photo %>
# This is where I want to drop that if statement, but I am not sure what it should be.
<%= f.link_to_remove "Remove" %>
#
<%end%>

<% unless f.object.new_record? %>

<%= link_to( image_tag(f.object.photo.url(:thumb))) %>
<%= f.check_box :_destroy %>
<%= f.label :_destroy, "Remove" %>

<%end%>

Answer 1

您无法在 ERB 视图中隐藏它，因为 fields_for 块内呈现的内容将用作“添加新”按钮的模板。因此，如果您在那里隐藏删除链接，则添加的任何一项都不会具有删除链接。

当我查看nested_form_for代码时，它对此没有本机支持。最简单的解决方案，但并不理想，是通过 CSS 或 JS 隐藏客户端上的删除链接。

我用这个JS解决了这个问题：

$(function() {
  $('a[data-nested-form-disable-first]').each(function() {
    var nested_container = $(this).closest('.fields');

    // check if is first
    if (!nested_container.prev().is('.fields')) {
        $(this).remove();
    }
  });
});

然后添加'data-nested-form-disable-first'来删除链接定义：

<%= f.link_to_remove 'Remove', 'data-nested-form-disable-first' => '' %>

它仅在您确保加载时不可删除的字段位于页面中时才有效。

Answer 2

我在这里看到两个选项供您选择：

1. 如果您的照片被询问是否可以删除，那将是最简单的解决方案
2. 您可以尝试通过 CSS 隐藏表单中的链接。

照片 API

尝试通过

class Photo ...
  def removable?
    ...
  end
end

_photo_fields.html.erb:

...
<%= f.file_field :photo %>
<% if f.object.photo.removable? %>
  <%= f.link_to_remove "Remove" %>
<% end %>

使用 CSS

等方法扩展您的照片模型，我不确定，但应该可以通过以下方式实现：

1. 添加 div为您的照片字段
2. 添加相关规则到您的 CSS 中。

所以这里是代码（只有您应该更改或添加的片段：

_photo_fields.html.erb:

<div class="photo_fields">
   ...
   <%= f.link_to_remove "Remove", :class => "remove" %>
   ...
</div>

application.css:

div.photo_field:first-child > a.remove {
  display: none;
}

第一个解决方案是正确的，如果可能的话，因为它根本不允许删除不可删除的东西。第二个是隐藏链接的解决方法，但要弱得多。