嵌套窗体的问题

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 这可能是有用的。