我们都见过辉煌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
最佳答案
你走在正确的道路上:
...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)
关于javascript - 如何使用 Haml 和 Formtastic 动态添加和删除嵌套模型字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2678009/