嵌套窗體的問題

Question

我正在嘗試創建一個完全可管理的網站，用戶可以在其中填寫一些技能（'css'，'php'，'ruby'，你的名字）。在它旁邊，他們用一個百分比填充他們認爲他們有多好。

我打算在圖表中顯示結果，但現在我被這個嵌套窗體卡住了，我無法讓它們顯示出來。

所以，正如我剛纔所說，你可以在一個名爲頁面設置添加你的技能，所以這裏是我如何聯繫在一起：

skill.rb和setting.rb

class Skill < ApplicationRecord 
    belongs_to :settings, optional: true 
end 

class Setting < ApplicationRecord 
    has_many :skills, dependent: :destroy 
     accepts_nested_attributes_for :skills, allow_destroy: true, 
     reject_if: proc { |att| att['name'].blank? } 
# Other lines... 

ApplicationHelper.rb

def link_to_add_row(name, f, association, **args) 
    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, f: builder) 
    end 
    link_to name, '#', class: 'add_fields' + args[:class], data: { id: id, fields: fields.gsub('\n', '') } 
    end 

的application.js個

$(document).on('turbolinks:load', function() { 

    $('form').on('click', '.remove_skill', function(event) { 
     $(this).prev('input[type="hidden"]').val('1'); 
     $(this).closest('div').hide(); 
     return event.preventDefault(); 
    }); 

    $('form').on('click', '.add_fields', function(event) { 
     let regexp, time; 
     time = new Date().getTime(); 
     regexp = new RegExp($(this).data('id'), 'g'); 
     $('.skills').append($(this).data('skills').replace(regexp, time)); 
     return event.preventDefault(); 
    }); 
}); 

視圖/設置/ _form.html.erb

<!-- Some other fields --> 
    <table> 
    <thead> 
     <tr> 
     <th></th> 
     <th>Compétence</th> 
     <th>Maîtrise</th> 
     </tr> 
    </thead> 
    <tbody class="fields"> 
     <%= fields_for :skills do |builder| %> 
     <%= render 'skill', f: builder %> 
     <% end %> 

     <%= link_to_add_row('Ajouter skill', f, :skills, class: 'add_skill') %> 

    </tbody> 
    </table> 
    <!-- Some other fields --> 

**視圖/設置/ _skill.html.erb

<tr> 
    <td> 
    <%= f.input_field :_destroy, as: :hidden %> 
    <%= link_to 'Delete', '#', class: 'remove_record' %> 
    </td> 
    <td><%= f.input :name, label: false %></td> 
    <td><%= f.input :completed, label: false %></td> 
    <td><%= f.input :due, label: false, as: :string %></td> 
</tr> 

我跟着this video的指令，到目前爲止，當我點擊「添加技能」時，我可以看到我的軌道控制檯中呈現了嵌套窗體，但僅此而已。

我認爲這只是我沒有看到的東西，但我重複了兩次教程，每次都有點不同，但沒有顯示當我點擊「添加技能」。

歡迎任何幫助！

Answer 1

有幾件事要看。第一，這個功能：

$('form').on('click', '.add_fields', function(event) { 
    let regexp, time; 
    time = new Date().getTime(); 
    regexp = new RegExp($(this).data('id'), 'g'); 
    $('.skills').append($(this).data('skills').replace(regexp, time)); 
    return event.preventDefault(); 
}); 

正在尋找一個有'技能'類的元素，並且會在那裏追加記錄。除非我錯過了它，否則我沒有看到它。

接下來，嘗試禁用turbolinks，至少在調試時 - 我之前遇到過問題。

1. 從您的Gemfile中刪除gem'turbolinks'行。
2. 從app/assets/javascripts/application.js中刪除// = require turbolinks。
3. 從app/views/layouts/application.html.erb中刪除兩個「data-turbolinks-track」=> true哈希鍵/值對。

（從blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

之後，扔在在驗證預期值

console.log() 

語句的一疊是你所期望的，元素在運行時存在等等。

最後，我在這裏有一個類似的帖子： Javascript nested forms for has_many relationships 這可能是有用的。