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

Question

我们都看过出色的复杂表单 railscast，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 表单有很大不同。

我已经看到这个问题在网上问了几次，但还没有找到答案——现在你知道，不仅仅是我会感谢帮助！

杰克

score 27 · Accepted Answer

你在正确的轨道上：

...Formtastic 表单的 DOM 树与常规的 rails 表单有很大不同。

为了将 Ryan 的示例改编为 formtastic，提醒一下semantic_fields_forhelper 类似于 helper 会很有帮助semantic_form_for，后者以列表形式输出输入。

为了使事情尽可能接近 Railscast 代码，您需要：

将嵌套字段的集合包含在一个包装器中（我使用带有subjectsCSS ID 的 div。）
将嵌套字段包含在 ul/ol 包装器中（我应用了一个nested-fieldsCSS 类。）

这是您的文件应有的内容。

教师表格（带有嵌套的主题字段）：

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

使用以下宝石：

形式化（0.9.10）
哈姆 (3.0.2)
小黄瓜 (1.0.26)
导轨 (2.3.5)

score 3 · Accepted Answer

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

score 1 · Accepted Answer

1

在 Rails 3 中，不需要在帮助程序中使用 h() 函数。只是省略，它应该工作。

于 2010-10-25T18:16:17.233 回答

score 1 · Accepted Answer

多年来，我一直在不停地反对这个，今天我想出了一些我引以为豪的东西 - 优雅，不引人注目，你只需两三行（非常长）代码就可以做到.

ParentFoo has_many NestedBars，带有适当的accepts_nested_parameters 和所有这些好东西。您将 nested_bar 的一组字段呈现到链接上的 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 替换字符串。在这里，我正在做简单的事情，即在链接 before() 之前插入新字段，但您也可以在链接上提供一个 add-nested-replace-target 属性，说明您希望新字段在 DOM 中的哪个位置结束。

应用程序.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))
})

当然，你可以把它放在一个助手中；我在这里直接在视图中展示它，因此原理很清楚，而不会在元编程中搞混。如果您担心名称冲突，您可以在该帮助程序中生成一个唯一 ID 并将其传递给嵌套替换。

对删除行为的幻想留给读者作为练习。

（显示在 Rails 2 中，因为这是我今天工作的站点——在 Rails 3 中几乎相同）

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

4 回答 4

Related

Reference