在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 %>"來使用轉義字符。