Rails添加動態嵌套窗體部分與本地在JS

Question

我附加不同的輸入取決於用戶在我的表單上的操作。如果用戶點擊「列表」單選按鈕，我想顯示possibilities的嵌套輸入。我正在嘗試使用能夠創建動態輸入字段的cocoon gem。我的形式如下：

<%= form_for([@issue, @question]) do |f| %> 
    <%= f.label :content %> 
    <%= f.text_area :content%> 
    <br> 
    <%= f.fields_for :answer do |a| %> 
    <%= a.label "Answer Type :" %> 
    <br> 
    <% Answer.answer_type.options.each do |option| %> 
     <%= a.label option.first %> 
     <%= a.radio_button :answer_type, option.first, class: "answer_type" %> 
     <br> 
    <% end -%> 
    <div class="question_list"></div> 
    <% end -%> 

    <%= f.submit %> 
    <ul> 
    <% @question.errors.full_messages.each do |message| %> 
     <li><%= message%></li> 
    <% end -%> 
    </ul> 
<% end %> 

這是顯示根據用戶點擊其中不同的諧音的JS：

<%= content_for(:after_js) do %> 
    <script> 
    $(document).ready(function(){ 
     $(".answer_type").click(function(){ 
     var value = $(this).val(); 
     console.log(value); 

     if (value == "Yes/no") { 
      $(".question_list").empty(); 
      $(".question_list").append("<%= j render 'questions/type/yes_no' %>"); 
     } 
     else if (value == "List") { 
      $(".question_list").empty(); 
      $(".question_list").append("<%= j render 'questions/type/list', a:a %>"); 
     } 
     }); 
    }) 
    </script> 
<% end -%> 

如果勾選「名單」上的用戶點擊，我顯示此部分，其需要a變量要建：

<%= a.fields_for :possibilities do |possibility| %> 
    <%= render 'possibilities/possibility_fields', a: possibility%> 
    <div class="links"> 
     <%= link_to_add_association 'add possibility', a, :possibilities %> 
    </div> 
<% end -%> 

問題是JS：

else if (value == "List") { 
      $(".question_list").empty(); 
      $(".question_list").append("<%= j render 'questions/type/list', a:a %>"); 

觸發一個錯誤

undefined local variable or method `a' for #<#<Class:0x007fb5d4786568>:0x007fb5d59c2808> 

，因爲我相信a在讀JS時尚未建成。

當用戶點擊「list」單選按鈕時，如何繞過此操作並動態構建嵌套字段？

Answer 1

似乎有服務器端渲染和客戶端之間的混淆渲染在這裏：

• 服務器端渲染髮生的Rails應用程序中。這是進程 ，將您的所有erb轉換爲html和javascript。
• 客戶端渲染髮生在用戶的瀏覽器中。當瀏覽器執行javascript時會發生什麼。

這意味着，你不能渲染JavaScript的ERB。 更確切地說，當你的ruby應用程序試圖渲染$(".question_list").append("<%= j render 'questions/type/list', a:a %>");時，它會嘗試在發送響應給客戶端之前立即渲染該部分。由於a變量僅在您的<%= f.fields_for :answer do |a| %>塊中定義，因此會引發您看到的錯誤。底線是，爲了在客戶端做一些真實的渲染，你可能需要一個渲染庫，比如ReactJS。