jquery - 使用 jQuery 在 Rails 中实现不显眼的动态表单字段

Question

我正在尝试克服 Rails 中动态表单字段的障碍——这似乎是框架不能很好地处理的问题。我也在我的项目中使用 jQuery。我已经安装了 jRails，但我宁愿尽可能不引人注意地编写 AJAX 代码。

我的表单相当复杂，两层或三层嵌套并不罕见。我遇到的问题是生成正确的表单 ID，因为它们非常依赖于表单生成器上下文。我需要能够动态添加新字段或删除 has_many 关系中的现有记录，但我完全不知所措。

到目前为止，我见过的每个例子都在某种程度上很丑陋。瑞安·贝茨的tutorial需要 RJS，这会导致标记中出现一些非常难看的、干扰性的 javascript，并且似乎是在嵌套属性之前编写的。我见过fork那个例子使用不显眼的 jQuery，但我只是不明白它在做什么，并且无法让它在我的项目中工作。

有人可以提供一个简单的例子来说明这是如何完成的吗？在尊重 Controller 的 RESTful 约定的情况下这是否可能？

<小时/>

Andy 发布了一个删除现有记录的出色示例，有人可以提供一个使用正确属性创建新字段的示例吗？我一直无法弄清楚如何使用嵌套表单来做到这一点。

Answer 1

由于没有人对此提供答案，即使在赏金之后，我终于设法自己解决这个问题。这不应该是一个难题!希望这在 Rails 3.0 中会更容易做到。

Andy 的示例是直接删除记录的好方法，无需向服务器提交表单。在这种特殊情况下，我真正寻找的是一种在更新嵌套表单之前动态添加/删除字段的方法。这是一个稍微不同的情况，因为当字段被删除时，它们实际上并没有被删除，直到提交表单。根据情况，我最终可能会同时使用两者。

我的实现基于 Tim Riley's complex-forms-examples在 github 上进行 fork 。

首先设置模型，并确保它们支持嵌套属性:

class Person < ActiveRecord::Base
  has_many :phone_numbers, :dependent => :destroy
  accepts_nested_attributes_for :phone_numbers, :reject_if => lambda { |p| p.values.all?(&:blank?) }, :allow_destroy => true
end

class PhoneNumber < ActiveRecord::Base
  belongs_to :person
end

为 PhoneNumber 的表单字段创建部分 View :

<div class="fields">
  <%= f.text_field :description %>
  <%= f.text_field :number %>
</div>

接下来为 Person 模型编写一个基本的编辑 View :

<% form_for @person, :builder => LabeledFormBuilder do |f| -%>
  <%= f.text_field :name %>
  <%= f.text_field :email %>
  <% f.fields_for :phone_numbers do |ph| -%>
    <%= render :partial => 'phone_number', :locals => { :f => ph } %>
  <% end -%>
  <%= f.submit "Save" %>
<% end -%>

这将通过为 PhoneNumber 模型创建一组模板字段来实现，我们可以使用 JavaScript 复制这些模板字段。我们将在 app/helpers/application_helper.rb 中创建辅助方法为此:

def new_child_fields_template(form_builder, association, options = {})
  options[:object] ||= form_builder.object.class.reflect_on_association(association).klass.new
  options[:partial] ||= association.to_s.singularize
  options[:form_builder_local] ||= :f

  content_tag(:div, :id => "#{association}_fields_template", :style => "display: none") do
    form_builder.fields_for(association, options[:object], :child_index => "new_#{association}") do |f|
      render(:partial => options[:partial], :locals => { options[:form_builder_local] => f })
    end
  end
end

def add_child_link(name, association)
  link_to(name, "javascript:void(0)", :class => "add_child", :"data-association" => association)
end

def remove_child_link(name, f)
  f.hidden_field(:_destroy) + link_to(name, "javascript:void(0)", :class => "remove_child")
end

现在将这些辅助方法添加到编辑部分:

<% form_for @person, :builder => LabeledFormBuilder do |f| -%>
  <%= f.text_field :name %>
  <%= f.text_field :email %>
  <% f.fields_for :phone_numbers do |ph| -%>
    <%= render :partial => 'phone_number', :locals => { :f => ph } %>
  <% end -%>
  <p><%= add_child_link "New Phone Number", :phone_numbers %></p>
  <%= new_child_fields_template f, :phone_numbers %>
  <%= f.submit "Save" %>
<% end -%>

您现在已经完成了 js 模板。它将为每个关联提交一个空白模板，但:reject_if模型中的子句将丢弃它们，只留下用户创建的字段。 更新: 我重新考虑了这个设计，见下文。

这不是真正的 AJAX，因为除了页面加载和表单提交之外，没有任何与服务器进行的通信，但老实说，事后我找不到一种方法来做到这一点。

事实上，这可能会提供比 AJAX 更好的用户体验，因为您不必等待服务器对每个附加字段的响应，直到完成为止。

最后我们需要用 JavaScript 连接起来。将以下内容添加到您的“public/javascripts/application.js”文件中:

$(function() {
  $('form a.add_child').click(function() {
    var association = $(this).attr('data-association');
    var template = $('#' + association + '_fields_template').html();
    var regexp = new RegExp('new_' + association, 'g');
    var new_id = new Date().getTime();

    $(this).parent().before(template.replace(regexp, new_id));
    return false;
  });

  $('form a.remove_child').live('click', function() {
    var hidden_field = $(this).prev('input[type=hidden]')[0];
    if(hidden_field) {
      hidden_field.value = '1';
    }
    $(this).parents('.fields').hide();
    return false;
  });
});

此时您应该已经有了一个准系统的动态表单!这里的 javascript 非常简单，可以很容易地使用其他框架来完成。您可以轻松替换我的application.js例如，使用原型(prototype)+ lowpro 的代码。基本思想是，您不会将巨大的 javascript 函数嵌入到您的标记中，并且您不必编写乏味的 phone_numbers=()模型中的函数。一切正常。万岁!

<小时/>

经过一些进一步的测试，我得出结论，模板需要移出 <form>字段。将它们保留在那里意味着它们会与表单的其余部分一起发送回服务器，这只会在以后带来麻烦。

我已将其添加到布局的底部:

<div id="jstemplates">
  <%= yield :jstemplates %>
</div

并修改了new_child_fields_template助手:

def new_child_fields_template(form_builder, association, options = {})
  options[:object] ||= form_builder.object.class.reflect_on_association(association).klass.new
  options[:partial] ||= association.to_s.singularize
  options[:form_builder_local] ||= :f

  content_for :jstemplates do
    content_tag(:div, :id => "#{association}_fields_template", :style => "display: none") do
      form_builder.fields_for(association, options[:object], :child_index => "new_#{association}") do |f|        
        render(:partial => options[:partial], :locals => { options[:form_builder_local] => f })        
      end
    end
  end
end

现在您可以删除 :reject_if从您的模型中删除子句，不再担心模板被发回。