在Rails中通过jQuery呈现表格

Question

我正尝试使用rails 5和jQuery创建一个动态的嵌套表单。我可以轻松地删除嵌套字段，但是很难将其添加回来。我_project_field.html.erb如下：

<%= form_for @project do |project| %>  

    <%= project.label :description, class: 'col-md-2' %> 
    <%= project.text_field :description, class: 'col-md-8' %> 

    <%= project.label :lot, class: 'col-md-2' %> 
    <%= project.text_field :lot, class: 'col-md-8' %> 

    <%= project.fields_for :tests do |test| %> 
    <%= render 'test_fields', :f => test %> 
    <% end %> 

    <%= link_to "Add Test", 'javascript:void(0);', class: "add-link col-md-2" %> 

    <%= project.hidden_field :user_id, value: current_user.id %> 
    <%= project.submit "Submit", class: 'btn btn-primary col-md-2 col-md-offset-3' %> 

<% end %> 

和里面是_test_fields形式，

<div class="form-fields"> 
    <div class="row"> 

    <%= f.label :test_method_id, "Test Method", class: 'col-md-2' %> 

    <div class="col-md-6 method-select"> 
     <%= f.select(:test_method_id, options_for_select(@methods, selected: f.object.test_method_id), include_blank: true) %> 
    </div> 

    <%= link_to "Remove", 'javascript:void(0);', class: "remove-link col-md-2" %> 

    </div> 
</div> 

当我点击“添加测试”的链接，它只是呈现字符串“<％= j的渲染'test_fields'，：f => test％>“。代码如下：

// assets/javascript/forms.js 

$(".add-link").click(function() { 
    console.log("add link"); 
    var html = '<%= j render \'test_fields\', :f => test %>' 
    $(this).parent().append(html); 
}) 

我该如何去添加字段partials到嵌套窗体？

Answer 1

JavaScript代码正在完成它应有的工作。这不起作用的原因是因为你正试图解释浏览器中的ERB代码。

form.js文件已经加载到浏览器中。但是'<%= j render \'test_fields\', :f => test %>'是要在服务器中解释的ERB代码。

所以，这是一个动态的形式工作，你将需要：

1. 在创建一个动作你projects_controller像#add_form_field 可能。

2. 在routes.rb中定义行动的必要路线。其中大多数 可能会给你一条像project_add_form_field_path的路径

3. 你会在你的链接中使用这个路径。即，不是

   <%= link_to "Add Test", 'javascript:void(0);', class: "add-link col-md-2" %>

   你会碰到这样的：

   <%= link_to "Add Test", project_add_form_field_path, class: "add-link col-md-2", remote: true %>

4. 这将调用#add_form_field行动在 projects_controller。 remote: true将使其异步 ，以便您的页面当然不会重新加载。

5. 所以现在控制器的动作是要在 查找文件夹中的相关文件。由于它是一个异步调用，因此它将 查找JavaScript文件：/views/project/add_form_field.js.erb。你 将要把你的form.js文件中的JavaScript文件转换为 这个add_form_file.js.erb文件。现在'<%= j render \'test_fields\', :f => test %>'位将在 服务器中处理，并且事情应该按照您的要求工作。

   另外在JavaScript中，我宁愿使用"<%= j render 'test_fields', :f => test %>"来使用转义字符。