2013-07-24 16 views
10

私はアプリケーションの作成の初期段階にあり、基本コードを配置しています。ここでネストされた属性を持つレールにフィールドを動的に追加する

アプリ/ビュー/カード/ 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現在のコードです。コーヒー

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 

app_helper

だから今、このコードは私に2つのテキストフィールドを提供します。 1つはタグ名用、もう1つはタグ加重用です。コントローラはDBにすべてを挿入します。私はいくつかのjavascriptを使って、これらのタグ/ウエイトフィールドを好きなだけ動的に追加したいと思います。私が見つけたものはすべてネストされた属性に焦点を当てているようです。任意のアイデアを高く評価

更新

これ以上のコードを追加しました。 「:スキル」を、私は、私はここに合格すべきかわからない私が午前問題はそれが好きではない

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

...私は、このライン上で渡しています第三の変数です。だからここ

+0

あなただけのクラスとdiv要素の中にそれらのフィールドを投げた後、jQueryのを使用している場合は、ボタンをクリックすると、その要素、aコピーしたhtmlで別のdivを追加するには、htmlをコピーしてから 'after()'を使います。 – jeremywoertink

+2

この種の作業から苦痛を冒すいくつかの余分なオプションを備えた、すばらしい素晴らしい[Cocoon](https://github.com/nathanvda/cocoon)を指摘したかっただけです – Romuloux

答えて

20

は、私はアプリ/ビュー/スキル/ _form.html.erbと使用してから部分を呼んでいる...私は私の2つのモデルがあり、ここで...思い付いたものです

class Skill < ActiveRecord::Base 
    belongs_to :tag 
    attr_accessible :tag_id, :weight 
end 

class Tag < ActiveRecord::Base 
    has_many :skills 
    attr_accessible :name 
end 

新しいフィールドを追加する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> 

を値を記憶している#addNewTagがクリックされたときにだけ言って、JavaScriptの...本当のまっすぐで、appeand #skillSetに#new_skills_form

$(document).ready(function(){ 
    $("#addNewTag").click(function(){ 
    $("#skillSet").append($("#new_skills_form").html()); 
    }); 
}); 

...そして最終的には、コントローラのアクションは、配列をdecontructs、そしてそれらを保存...

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 
関連する問題