2014-11-08 78 views
1

我目前有一個表單供用戶添加他們的工作經驗。它看起來是這樣的:使用JavaScript在Ruby on Rails中呈現多個表單

student_experience.html.erb

<%= form_for(:user_student, :url => {:controller => 'profile', :action => 'add_student_experience'}) do |f| %> 
    <h2>Work experience</h2> 
    <p> 
     <%= f.label :company_name %> 
     <%= f.text_field :company_name %> 
    </p> 
    <p> 
     <%= f.label :job_title %> 
     <%= f.text_field :job_title %> 
    </p> 
    <p> 
     <%= f.label :job_description %> 
     <%= f.text_area :job_description%> 
    </p> 

    <%= f.submit "Next" %> 

而在控制器中,我有這樣的功能:具有一個鍵

def add_student_experience 
    @student_works = StudentWork.create(check_add_student_work_params) 

    if @student_works.save 
     redirect_to(:controller => 'home', :action => 'index') 
    else 
     render 'student_experience' 
    end 
    end 

我想實現的是在視圖中,如果他們有多個工作經驗,可以爲用戶添加更多表單。我如何實現這一目標?我應該怎樣改變控制器來處理多種形式?謝謝!

+2

您正在尋找coccoon寶石:https://github.com/nathanvda/cocoon – BroiSatse 2014-11-08 22:13:16

+0

嘗試安裝[gem「cocoon]」(https://github.com/nathanvda/cocoon)「或使用[活動記錄嵌套屬性](http://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods的.html) – MZaragoza 2014-11-09 00:47:01

回答

0

使用繭寶石。這很容易,會爲你節省很多時間。

下面是關於如何在您的情況下實施繭的詳細說明。

student_exerience.html.erb

<%= form_for(:user_student, :url => {:controller => 'profile', :action => 'add_student_experience'}) do |f| %> 
     <%= f.label :company_name %> 
     <%= f.text_field :company_name %> 
     <%= f.label :job_title %> 
     <%= f.text_field :job_title %> 
     <%= f.label :job_description %> 
     <%= f.text_area :job_description%> 
    <%= link_to_add_association 'Add experience', f, :experiences %> 

    <%= f.submit "Next" %> 

創建一個新的部分命名爲同一文件夾_experience_fields.html.erb爲您student_experience.html.erb視圖。

_experience_fields.html.erb

<%= f.label :company_name %> 
    <%= f.text_field :company_name %> 
    <%= f.label :job_title %> 
    <%= f.text_field :job_title %> 
    <%= f.label :job_description %> 
    <%= f.text_area :job_description%> 
    <%= link_to_remove_association "remove", f%> 

不要忘了導入繭在application.js文件//= require cocoon