在具有嵌套属性的轨道中动态添加字段
Dynamically add fields in rails with out nested attributes
我正处于创建应用程序的早期阶段,只是准备了一些基本代码。这是当前代码。。。
app/views/cards/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 %>
路线
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
控制器
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
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()
应用程序帮助程序
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
现在,这段代码给了我两个文本字段。一个用于标记名称,另一个用于标签权重,控制器将所有内容插入到DB中。我想使用一些javascript来动态添加尽可能多的这些标记/权重字段。我所发现的一切似乎都集中在嵌套属性上。任何想法都值得赞赏。
更新
添加了更多的代码来充实这一点。我遇到的问题是我在这行传递的第三个变量。。。
<%= link_to_add_fields "Add New Tag", f, :skill %>
它不喜欢":技能",但我不确定我应该在这里传递什么。
下面是我的想法。。。这是我的两个模型。。。
class Skill < ActiveRecord::Base
belongs_to :tag
attr_accessible :tag_id, :weight
end
class Tag < ActiveRecord::Base
has_many :skills
attr_accessible :name
end
我正在调用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>
分部很简单。我在这里所做的就是将值存储在一个数组中。。。
<div class="skillsForm">
<%= label_tag 'tag' %>
<%= text_field_tag 'tags[]' %>
<%= label_tag 'weight' %>
<%= text_field_tag 'weights[]' %>
</div>
这是javascript。。。直接说,只要点击#addNewTag,就会出现#new_skills_form到#skillSet
$(document).ready(function(){
$("#addNewTag").click(function(){
$("#skillSet").append($("#new_skills_form").html());
});
});
最后,控制器操作解除对阵列的构造,并保存它们。。。
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
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用jQuery动态添加表并在其中动态添加行
- 如何使用Angular动态添加iframe-src
- 如何向JSON数组动态添加属性
- 动态添加通过json创建的选择项
- 使用jQuery根据动态生成的html动态添加html
- 使用.on动态添加jquery/js不知道的html元素
- JS动态添加字段-删除按钮不起作用
- 动态添加AngularJS脚本
- 将表行动态添加到表或tbody元素中
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 将特定属性动态添加到元素中
- 在highcharts.js中向点弹出窗口动态添加文本
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- 使用jQuery动态添加onClick事件
- 如何在Opencart中动态添加JavaScript
- 剑道UI下载列表:如何动态添加新元素
- 动态添加复选框和输入框 jQuery
- 动态添加哈希标记;t工作
- 将图表动态添加到组合高图表中