如何在Rails中创建嵌套表单4 [英] How to Create Nested Forms in Rails 4

问题描述

我试图让用户通过各自的连接表（exercise_equipment，exercise_muscles）以多对多的关系创建设备和肌肉练习。我已经得到了每个练习添加一个设备/肌肉的表单，但无法弄清楚如何添加链接以便在运行中向表单添加另一个字段。

I'm trying to let a user create Exercises with Equipment and Muscles in many-to-many relationships through their respective join tables( exercise_equipment, exercise_muscles ). I've gotten the form working for adding one equipment/muscle per exercise, but cannot figure out how to add a link to add another field to the form on the fly.

我已经查看了 RailsCasts ，这篇文章，已将其作为关于我自己的上一篇文章，但根本无法获得此功能上班。我是Rails 4的新手，我还在尝试学习Javascript，但是我想深入了解如何设置Rails 4方式！

I've checked out RailsCasts, this post, have asked it as a side question on a previous post of my own, but simply cannot get this functionality to work. I'm fairly new to Rails 4 and am still trying to learn Javascript, but I'd love a thorough explanation of how to set this up the Rails 4 way!

我的模特：

# id        :integer
# name      :string
# is_public :boolean
Exercise
    has_many :exercise_equipment
    has_many :equipment, :through => :exercise_equipment
    accepts_nested_attributes_for :exercise_equipment


# id           :integer
# exercise_id  :integer
# equipment_id :integer
# optional     :boolean
ExerciseEquipment
    belongs_to :exercise
    belongs_to :equipment
    accepts_nested_attributes_for :equipment


# id   :integer
# name :string
Equipment
    has_many :exercise_equipment
    has_many :exercises, :through => :exercise_equipment

我的控制器方法：

def new
  @exercise = Exercise.new
  @exercise.exercise_equipment.build
  @exercise.exercise_muscles.build
end

def create
  exercise = current_user.exercises.new( exercise_params )
  if exercise.save!
    redirect_to exercise
  else
    render 'new'
  end
end

views / exercise / new.html.erb

<h1>Create New Exercise</h1>

<%= form_for @exercise do |f| %>
  <%= render 'form', f: f %>
  <%= f.submit "New Exercise" %>
<% end %>

views / exercises / _form.html.erb

<%= f.label :name %><br />
<%= f.text_field :name, autofocus: true %>

<%= f.check_box :is_public %> Public

<%= f.fields_for :exercise_muscles do |emf| %>
  <%= emf.collection_select :muscle_id, Muscle.all, :id, :name, { include_hidden: false } %>
<% end %>

<%= f.fields_for :exercise_equipment do |eef| %>
  <%= eef.collection_select :equipment_id, Equipment.all, :id, :name, { include_hidden: false } %>
  <%= eef.check_box :optional %> Optional
<% end %>

推荐答案

尝试使用Rich的解决方案后，我想找到一个在使用的代码方面稍微简单一点。我找到了宝石 Cocoon ，它非常好用，并且非常易于集成。

After attempting to use Rich's solution, I wanted to find one that was a bit more minimal in terms of the code used. I found the gem Cocoon, which works great and was very simple to integrate.

我的主_form视图：

My main _form view:

<div class="form-group">
  <%= f.label :name %><br />
  <%= f.text_field :name, autofocus: true %>
</div>

<div class="form-group">
  <%= f.check_box :is_public %> Public
</div>

<div class="form-group">
  <%= f.fields_for :exercise_muscles do |emf| %>
    <%= render 'exercise_muscle_fields', :f => emf %>
  <% end %>
  <%= link_to_add_association 'Add Muscle', f, :exercise_muscles %>
</div>

<div class="form-group">
  <%= f.fields_for :exercise_equipment do |eef| %>
    <%= render 'exercise_equipment_fields', :f => eef %>
  <% end %>
  <%= link_to_add_association 'Add Equipment', f, :exercise_equipment %>
</div>

从这里可以看出，添加一个简单的link_to_add_association方法可以解决所有问题。 Javascript在后台。对于未来的读者，以下是每个表单组包含的部分内容：

As can be seen here, the addition of a simple "link_to_add_association" method takes care of all of the Javascript in the background. For future readers, here are the partials that each of these form-groups contain:

_exercise_muscle_fields：

_exercise_muscle_fields:

<％= f.collection_select：muscle_id，Muscle.all.order（'muscle_group_id ASC'），：id，：name，{include_hidden：false}％>

_exercise_equipment_fields：

_exercise_equipment_fields:

<%= f.collection_select :equipment_id, Equipment.all.order( 'name ASC' ), :id, :name, { include_hidden: false } %>
<%= f.check_box :optional %> Optional

这篇关于如何在Rails中创建嵌套表单4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！