【问题标题】:Dynamically add fields in rails with out nested attributes在没有嵌套属性的 Rails 中动态添加字段
【发布时间】:2013-07-24 15:58:06
【问题描述】:

我正处于创建应用程序的早期阶段,我只是在编写一些基本代码。这是当前代码...

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()

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

所以现在这段代码给了我两个文本字段。一个用于标签名称,另一个用于标签重量,控制器将所有内容插入数据库中。我想使用一些 javascript 来动态添加我喜欢的尽可能多的标签/权重字段。我发现的一切似乎都集中在嵌套属性上。任何想法表示赞赏。

更新

添加了更多代码来充实这一点。我遇到的问题是我在这一行传入的第三个变量...

  <%= link_to_add_fields "Add New Tag", f, :skill %>

它不喜欢':skill',但我不确定我应该在这里传递什么。

【问题讨论】:

  • 如果你只是使用jQuery,那么将这些字段放入一个带有类的div中,当你点击按钮时,找到那个元素,复制html,然后使用after()添加另一个带有复制的 html 的 div。
  • 只是想指出非常棒的Cocoon,它通过一些额外的选项来完成所有这些工作,从而减轻这种工作的痛苦

标签: javascript ruby-on-rails


【解决方案1】:

这就是我想出的……这是我的两个模型……

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-19
    • 2016-09-29
    • 1970-01-01
    • 2018-04-19
    相关资源
    最近更新 更多