Rails中Cocoon/Simple Form嵌套字段不显示问题求助

看起来你遇到了嵌套表单字段渲染异常的问题——食材和步骤只显示轮廓，器具甚至连轮廓都看不到。我帮你梳理下几个核心问题和对应的解决办法：

1. Add按钮被嵌套在循环内，无初始对象时完全不显示 #

你当前把link_to_add_association放在了simple_fields_for的循环块里面，这就导致一个问题：如果Recipe没有关联的Ingredient/Direction/Utensil对象，这个循环根本不会执行，Add按钮也就不会出现在页面上，自然无法添加新字段。

解决办法：把Add按钮移到循环外面
修改你的视图代码，将每个部分的Add链接移到simple_fields_for循环之外：

<div class="row">
  <div class="col-md-4">
    <h3>Ingredients</h3>
    <div id="ingredients">
      <%= f.simple_fields_for :ingredients do |ingredient| %>
        <%= render "ingredients_fields", f: ingredient %>
      <% end %>
      <!-- 把Add按钮移到循环外 -->
      <div class="links">
        <%= link_to_add_association "Add Ingredient", f, :ingredients, class: "btn btn-default add-button" %>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <h3>Directions</h3>
    <div id="directions">
      <%= f.simple_fields_for :directions do |direction| %>
        <%= render "directions_fields", f: direction %>
      <% end %>
      <div class="links">
        <%= link_to_add_association "Add Step", f, :directions, class: "btn btn-default add-button" %>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <h3>Utensils</h3>
    <div id="utensils">
      <%= f.simple_fields_for :utensils do |utensil| %>
        <%= render "utensils_fields", f: utensil %>
      <% end %>
      <div class="links">
        <%= link_to_add_association "Add Utensil", f, :utensils, class: "btn btn-default add-button" %>
      </div>
    </div>
  </div>
</div>
<%= f.button :submit, class: "btn btn-primary" %>
</div>

2. 未预构建关联对象，导致simple_fields_for无内容可渲染 #

simple_fields_for只会渲染已经存在的关联对象，如果你在新建或编辑Recipe时没有构建至少一个Ingredient/Direction/Utensil对象，页面上就不会显示任何字段轮廓。

解决办法：在控制器的new和edit动作中预构建关联对象
修改recipes_controller.rb的new和edit方法：

def new
  @recipe = Recipe.new
  # 预构建至少一个对象，让表单能渲染初始字段
  @recipe.ingredients.build
  @recipe.directions.build
  @recipe.utensils.build
end

def edit
  @recipe = Recipe.find(params[:id])
  # 编辑页面如果没有关联对象，也构建一个备用
  @recipe.ingredients.build if @recipe.ingredients.empty?
  @recipe.directions.build if @recipe.directions.empty?
  @recipe.utensils.build if @recipe.utensils.empty?
end

3. 修正部分视图的CSS类语法错误 #

你的步骤部分视图里有个小错误：class="form-inline.clearfix"应该用空格分隔类名，否则CSS无法正确识别，可能导致字段显示异常：

<div class="form-inline clearfix">
  <div class="nested-fields">
    <%= f.input :step, input_html: { class: "form-input form-control" } %>
    <%= link_to_remove_association "Remove", f, class: "form-button btn btn-default" %>
  </div>
</div>

做完这些修改后，重新加载页面，应该就能看到初始的字段轮廓，Add按钮也能正常显示并添加新的嵌套字段了。

内容的提问来源于stack exchange，提问作者nattack