javascript 在带有嵌套属性的 rails 中动态添加字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17839147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically add fields in rails with out nested attributes
提问by Mark Locklear
I am in the early stages of creating an app, and am just putting some basic code in place. Here is the current code...
我正处于创建应用程序的早期阶段，只是在放置一些基本代码。这是当前的代码...
app/views/cards/front.html.erb
应用程序/视图/卡片/front.html.erb
<%= form_for(front_of_card_path) do |f| %>
<%= f.fields_for :competency_templates do |builder| %>
<%= render 'add_fields', f: builder %>
<% end %>
<%= link_to_add_fields "Add New Tag", f, :skill %>
<% end %>
routes
路线
controller :cards do
get '/front', action: 'front', as: 'front_of_card'
post '/save', action: 'create', as: 'save_card'
get '/my_contact_info', action: 'back', as: 'back_of_card'
put '/save', action: 'update', as: 'save_card'
get '/my_card', action: 'show', as: 'card'
end
controller
控制器
def create
@skill= Skill.new(params[:skill])
@tag = Tag.new(params[:tag])
@tag.save
@skill.tag_id = @tag.id
@skill.save
redirect_to front_of_card_path, notice: 'Skill was successfully created.'
#get user/session
#save skills & tags
end
cards.js.coffee
card.js.coffee
jQuery ->
$('form').on 'click', '.remove_fields', (event) ->
$(this).prev('input[type=hidden]').val('1')
$(this).closest('fieldset').hide()
event.preventDefault()
$('form').on 'click', '.add_fields', (event) ->
time = new Date().getTime()
regexp = new RegExp($(this).data('id'), 'g')
$(this).before($(this).data('fields').replace(regexp, time))
event.preventDefault()
app_helper
app_helper
module ApplicationHelper
def link_to_add_fields(name, f, association)
new_object = f.object.send(association).klass.new
id = new_object.object_id
fields = f.fields_for(association, new_object, child_index: id) do |builder|
render(association.to_s.singularize + "_fields", f: builder)
end
link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
end
end
So right now this code gives me two text fields. One for the a tag name and another for a tag weight, and the controller inserts everything in the DB. I would like use some javascript to dynamically add as many of these tag/weight fields as I like. Everything I've found seems to focus on nested attributes. Any ideas appreciated.
所以现在这段代码给了我两个文本字段。一个用于标签名称，另一个用于标签重量，控制器将所有内容插入数据库中。我想使用一些 javascript 来动态添加尽可能多的这些标签/权重字段。我发现的一切似乎都集中在嵌套属性上。任何想法表示赞赏。
Update
更新
Added more code to flesh this out. The issue I am having is the 3rd variable I am passing in on this line...
添加了更多代码来充实这一点。我遇到的问题是我在这条线上传递的第三个变量......
<%= link_to_add_fields "Add New Tag", f, :skill %>
It does not like ':skill', but I am not sure what I should be passing here.
它不喜欢 ':skill'，但我不确定我应该在这里传递什么。
回答by Mark Locklear
So here is what I came up with...here are my two models...
所以这就是我想出的……这是我的两个模型……
class Skill < ActiveRecord::Base
belongs_to :tag
attr_accessible :tag_id, :weight
end
class Tag < ActiveRecord::Base
has_many :skills
attr_accessible :name
end
I'm calling a partial from app/views/skills/_form.html.erb and using a js tag to add new fields. Also note that I am re-rendering the partial, then hiding it in the last div tag.
我正在从 app/views/skills/_form.html.erb 调用部分并使用 js 标签添加新字段。另请注意，我正在重新渲染部分，然后将其隐藏在最后一个 div 标签中。
<div id="skillSet">
<%= render partial: "skills_form" %>
</div>
<a href="javascript:;" id="addNewTag">Add New Tag</a>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
<div class="hide" id="new_skills_form">
<%= render partial: "skills_form", locals: {skill: false} %>
</div>
The partial is pretty simple. All I am doing here is storing the values in an array...
部分非常简单。我在这里所做的就是将值存储在数组中...
<div class="skillsForm">
<%= label_tag 'tag' %>
<%= text_field_tag 'tags[]' %>
<%= label_tag 'weight' %>
<%= text_field_tag 'weights[]' %>
</div>
...here is the javascript...real straight forward, just say when #addNewTag is clicked, appeand #new_skills_form to #skillSet
...这里是 javascript ...真正的直接，只需说点击 #addNewTag 时，将 #new_skills_form 附加到 #skillSet
$(document).ready(function(){
$("#addNewTag").click(function(){
$("#skillSet").append($("#new_skills_form").html());
});
});
...and finally the controller action decontructs the arrays, and saves them...
...最后控制器动作解构数组，并保存它们...
def create
@skill = Skill.new(params[:skill])
tags = params[:tags]
weights = params[:weights]
tags.each_with_index do |tag, index|
tag = Tag.create :name => tag
Skill.create :tag_id => tag.id, :weight => weights[index]
end
end
