2013-07-24 47 views
10

Tôi đang trong giai đoạn đầu của việc tạo ra một ứng dụng, và đang chỉ đặt một số mã cơ bản tại chỗ. Đây là mã hiện tại ...động thêm các trường trong đường ray với các thuộc tính lồng nhau ra

app/views/thẻ/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 %> 

tuyến

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 

khiển

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. cà phê

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 

Vì vậy, ngay bây giờ mã này mang lại cho tôi hai lĩnh vực văn bản. Một cho tên thẻ và một cho trọng lượng thẻ, và bộ điều khiển chèn tất cả mọi thứ trong DB. Tôi muốn sử dụng một số javascript để tự động thêm bao nhiêu các trường thẻ/trọng lượng theo ý muốn. Tất cả mọi thứ tôi đã tìm thấy dường như tập trung vào các thuộc tính lồng nhau. Bất kỳ ý tưởng đánh giá cao.

Cập nhật

Nhập thêm mã để xác nhận điều này. Vấn đề tôi đang gặp phải là biến số thứ ba mà tôi đang chuyển vào trên dòng này ...

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

Nó không thích ': kỹ năng', nhưng tôi không chắc mình nên đi qua đây.

+0

Nếu bạn chỉ sử dụng jQuery, sau đó ném những lĩnh vực thành một div với một lớp học, và khi bạn nhấp vào nút, hãy tìm phần tử đó, nd sao chép html, sau đó sử dụng 'after()' để thêm một div khác với html đã sao chép. – jeremywoertink

+2

Chỉ muốn chỉ ra [Cocoon] tuyệt vời (https://github.com/nathanvda/cocoon) thực hiện tất cả điều này với một số tùy chọn bổ sung giúp bạn thoát khỏi loại công việc này – Romuloux

Trả lời

20

Vì vậy, đây là những gì tôi đã đưa ra ... đây là hai mô hình của tôi ...

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

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

Tôi gọi một phần từ app/views/kỹ năng/_form.html.erb và sử dụng một thẻ js để thêm các trường mới. Cũng lưu ý rằng tôi đang hiển thị lại một phần, sau đó ẩn nó trong thẻ div cuối cùng.

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

Phần này khá đơn giản. Tất cả tôi đang làm ở đây là lưu trữ các giá trị trong một mảng ...

<div class="skillsForm"> 
    <%= label_tag 'tag' %> 
    <%= text_field_tag 'tags[]' %> 
    <%= label_tag 'weight' %> 
    <%= text_field_tag 'weights[]' %> 
</div> 

... đây là javascript ... thật thẳng về phía trước, chỉ nói khi #addNewTag được nhấp, appeand #new_skills_form để #skillSet

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

... và cuối cùng là hành động điều khiển decontructs các mảng, và lưu chúng ...

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 
Các vấn đề liên quan