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

Question

我们都看过Ryan Bates的嵌套模型表单教程，他解释了如何使用Javascript在父对象表单中动态添加或删除嵌套对象。

有没有人有关于如何修改这些方法以使其与Haml Formtastic一起使用的想法？

为了提供一些背景，这里是我目前面临的问题的简化版本：

# 教师表单（其中包含嵌套的科目表单）[来自我的应用程序]

- 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   

# 我的应用程序中的个人主题表单部分

- 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

- Jack Kinsella

---

你能发布一下 fields_for :subjects 的 HTML 输出吗？ - nfm

Answer 1

你已经在正确的方向上:

... Formtastic 表单的 DOM 树与普通 Rails 表单有很大不同。

要将 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

ApplicationHelper：

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：

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)
  });
}

使用以下宝石:

• formtastic (0.9.10)
• haml (3.0.2)
• gherkin (1.0.26)
• rails (2.3.5)

- Bennett

---

感谢您的解决方案 - 所以主题字段正在显示，按钮也是如此，但是当我单击任何一个链接时，我会滚动到屏幕顶部，没有任何操作（如果您想知道，我已经打开了js默认值）。我尝试了Steve的解决方案，使用它，删除链接可以工作，但不幸的是添加按钮无法工作。可能是我的标记略有不同 - 使用Rails 3和最新的Formtastic。有什么想法吗？ - Jack Kinsella

我只尝试过使用我上面列出的宝石进行此设置。 - Bennett

此外，听起来你并没有完全按照我的示例进行操作，所以你的表单结构可能有所不同。我建议你先让link_to_add_fields和add_fields助手正常工作，然后再考虑删除字段的问题。 - Bennett

Answer 2

jQuery的application.js:

function remove_fields(link) {
  $(link).prev("input[type=hidden]").val("1");
  $(link).parent(".nested-fields").hide();
}

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

- Steve

---

谢谢 - 用这个之后删除按钮可以正常工作，但添加按钮不能...使用Rails3和最新的Formtastic。 - Jack Kinsella

Answer 3

我已经在这个问题上苦思冥想了多年，今天终于想出了一些令人自豪的东西——优雅、不显眼，而且你只需要两三行（非常长的）代码就可以实现。

ParentFoo has_many NestedBars，具有适当的 accepts_nested_parameters 和所有这些好处。你将一组嵌套栏的字段呈现到链接的 data-add-nested 属性中，使用 :child_index 设置一个字符串，稍后可以替换它。你通过第二个参数 data-add-nested-replace 传递该字符串。

parent_foos/_form.html.haml

- semantic_form_for @parent_foo do |f|
  -# render existing records
  - f.semantic_fields_for :nested_bars do |i|
    = render 'nested_bar_fields', :f => i

  # magic!
  - reuse_fields = f.semantic_fields_for :nested_bars, @parent_foo.nested_bars.build, :child_index => 'new_nested_bar_fields' do |n| render('nested_bar_fields', :f => n) end
  = link_to 'Add nested bar', '#', 'data-add-nested' => reuse_fields, 'data-add-nested-replace' => 'new_nested_bar_fields'

嵌套字段部分并不复杂

parent_foos/_nested_bar_fields.html.haml

- f.inputs do
  = f.input :name
  = f.input :_delete, :as => :boolean

在您的jQuery中，您将元素的点击与data-add-nested字段绑定（我在这里使用了live（）以便于处理ajax加载的表单），以将字段插入到DOM中，并用新ID替换字符串。 在此，我正在将新字段插入链接之前进行简单操作，但您还可以在链接上提供一个add-nested-replace-target属性，指示您希望新字段出现在DOM中的位置。

application.js

$('a[data-add-nested]').live('click', function(){
  var regexp = new RegExp($(this).data('add-nested-replace'), "g")
  $($(this).data('add-nested').replace(regexp, (new Date).getTime())).insertBefore($(this))
})

当然，你可以把它放在 helper 中; 我直接在视图中呈现它，以便原理清楚，而无需在元编程中混淆。如果您担心名称冲突，可以在 helper 中生成唯一 ID，并将其传递给嵌套替换。

对于删除行为的高级操作留给读者自行练习。

（因为我今天正在使用的是 Rails 2，所以显示了它——在 Rails 3 中几乎相同）

- stephan.com

---

注意：由于HTML转义的原因，在Rails 3中可能不那么容易。 :( - stephan.com

使用 escape_once 似乎可以正常工作，例如在插入单个字段的半关联示例中：

• new_field = escape_once f.input(:related_thing) = link_to 'Add another', '#', 'data-insert' => new_field

- stephan.com

我进一步发展了这个技术，以便在没有模型的情况下使用 - 我遇到过一个客户需要指定要在报告中显示的字段集合的情况。这个版本使用一个块而不是一个单独的模板来表示字段，并使用一个“通用模型”来生成可替换的参数。以下是要点：https://gist.github.com/1554795 - stephan.com

Answer 4

在Rails 3中，helper中不需要使用h()函数。只需省略即可正常工作。

- Nolsto