javascript - 如何使用 Haml 和 Formtastic 动态添加和删除嵌套模型字段

Question

我们都见过辉煌complex forms railscast其中 Ryan Bates 解释了如何使用 Javascript 在父对象表单中动态添加或删除嵌套对象。

有谁知道如何修改这些方法才能与 Haml Formtastic 一起使用吗？

为了添加一些上下文，这是我当前面临的问题的简化版本:

# 教师表格(包含嵌套主题表格)[来 self 的申请]

- semantic_form_for(@teacher) do |form|
  - form.inputs do
    = form.input :first_name
    = form.input :surname
    = form.input :city
    = render 'subject_fields', :form => form 
    = link_to_add_fields "Add Subject", form, :subjects   

# 个人主题表格部分[来 self 的申请]

- form.fields_for :subjects do |ff| 
  #subject_field
    = ff.input :name
    = ff.input :exam
    = ff.input :level
    = ff.hidden_field :_destroy
    = link_to_remove_fields "Remove Subject", ff 

# 应用程序助手(直接来自 Railscasts)

  def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  end

  def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
      render(association.to_s.singularize + "_fields", :f => builder)
    end
    link_to_function(name, h("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}  \")"))
  end

#Application.js(直接来自 Railscasts)

  function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".fields").hide();
  }

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).up().insert({
    before: content.replace(regexp, new_id)
  });
  }

实现的问题似乎在于 JavaScript 方法 - Formtastic 表单的 DOM 树与常规的 Rails 表单有很大不同。

我在网上多次看到这个问题，但尚未找到答案 - 现在您知道，不仅仅是我会感激您的帮助!

jack

Answer 1

你走在正确的道路上:

...the DOM tree of a Formtastic form differs greatly from a regular rails form.

为了使 Ryan 的示例适应 formtastic，需要提醒的是，semantic_fields_for 帮助器与 semantic_form_for 帮助器类似，后者以列表形式输出输入。

为了使内容尽可能接近 Railscast 代码，您需要:

• 将嵌套字段的集合封装在包装器中(我使用带有 subjects CSS ID 的 div。)
• 将嵌套字段封装在 ul/ol 包装器中(我应用了 nested-fields CSS 类。)

这是您的文件应该是什么样的。

教师表单(带有嵌套主题字段):

- semantic_form_for(@teacher) do |form|
  - form.inputs do
    = form.input :first_name
    = form.input :surname
    = form.input :city

    %h2 Subjects
    #subjects
      - form.semantic_fields_for :subjects do |builder|
        = render :partial => "subject_fields", :locals => { :f => builder }
      .links
        = link_to_add_fields "Add Subject", form, :subjects

主题字段部分(对于嵌套主题):

%ul.nested-fields
  = f.input :name
  = f.input :exam
  = f.input :level
  = link_to_remove_fields "Remove Subject", f

应用程序助手:

def link_to_remove_fields(name, f)
  f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
end

def link_to_add_fields(name, f, association)
  new_object = f.object.class.reflect_on_association(association).klass.new
  fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
    render(association.to_s.singularize + "_fields", :f => builder)
  end
  link_to_function(name, h("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")"))
end

应用程序.js:

function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".nested-fields").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).up().insert({
    before: content.replace(regexp, new_id)
  });
}

使用以下 gem :

• 格式 (0.9.10)
• 哈姆尔 (3.0.2)
• 小 cucumber (1.0.26)
• rails (2.3.5)