Rails添加动态嵌套窗体部分与本地在JS

问题描述：

我附加不同的输入取决于用户在我的表单上的操作。如果用户点击“列表”单选按钮，我想显示possibilities的嵌套输入。我正在尝试使用能够创建动态输入字段的cocoon gem。我的形式如下：Rails添加动态嵌套窗体部分与本地在JS

<%= 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”单选按钮时，如何绕过此操作并动态构建嵌套字段？

答

似乎有服务器端渲染和客户端之间的混淆渲染在这里：

服务器端渲染发生的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。

Rails添加动态嵌套窗体部分与本地在JS

相关推荐