在Rails 3中以嵌套模型形式动态添加字段

时间:2011-01-27 01:05:41

标签: jquery ruby-on-rails ruby-on-rails-3

我看了http://railscasts.com/episodes/73-complex-forms-part-1http://railscasts.com/episodes/74-complex-forms-part-2但是在尝试代码时它似乎对我没用 - 我的假设从那时开始在rails中发生了很多变化。第二个问题是我正在使用JQuery。

有没有人知道在线的任何教程可能会显示更简单的方法吗?我已经创建了一个嵌套的模型表单 - 所以它实际上只是添加/删除字段动态地分解了我们。

1 个答案:

答案 0 :(得分:11)

这是一个简单的示例,展示了如何从单个页面发送多个邀请。缺少一些细节但可能足以帮助。您可以通过一些简单的jQuery在视图中添加和删除字段。此代码可以适应任何类型的嵌套模型情况。希望能帮助到你! :)

InviteController.rb

class InviteController < ApplicationController
  def new
    @invites = Invite.new
  end

  def create
    @invites = User.new(params[:user]).invites
    if @user.update_attributes(params[:user])
      return redirect_to root_url, :notice => "Your invite(s) were successfully sent!"
    else
      render :action => :new
    end
  end
end

User.rb

class User < ActiveRecord::Base
  has_many :invites

  accepts_nested_attributes_for :invites
end

Invite.rb

class Invite < ActiveRecord::Base
  belongs_to :user
  after_create :send_invite

  private

  def send_invite
    # Send e-mail...
  end
end

new.html.erb

<% form_tag invites_path do %>
  <%= error_messages_for :object => @user.invites %>
  <ul id="invite-list">
    <%= render @invites %>
  </ul>
  <div>
    <%= submit_tag "Send Invite" %>
    <%= link_to "Add Another", "#add", :id => "add-another" %>
  </div>
<% end %>

_invite.html.erb

<%= fields_for "user[invites_attributes][]", invite do |i| %>
  <li>
    <%= link_to("Remove", "#delete", :class => "delete-invite") %>
    <%= i.label :full_name, "Full Name" %>
    <%= i.text_field :full_name %>
    <%= i.label :email, "Email Address" %>
    <%= i.text_field :email %>
  </li>
<% end %>

的application.js

$(document).ready(function() {
  $('a#add-another').click(function() {
    $('#invite-list li:first').clone().find('input').val('')
    .end().appendTo('#invite-list');
  });

  $('.delete-invite').live('click', function() {
    if ($('#invite-list li').length > 1)
  $(this).parent().remove();
    else
  alert('You need at least one invite.')
  });
});