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 -%>

如果用户点击复选框“list”，我显示的部分需要构建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>

因为我认为在阅读JS时尚未构建a。

当用户点击“list”单选按钮时，如何绕过这个并动态构建我的嵌套字段？

Answer 1

服务器端呈现和客户端呈现之间似乎存在混淆：

服务器端渲染发生在您的rails应用程序中。这是一个过程这将你的所有erb变成html和javascript。
客户端呈现发生在用户的浏览器中。这是浏览器执行javascript时会发生什么。

这意味着您无法使用Javascript渲染任何ERB。更确切地说，当您的ruby应用程序尝试渲染select substring(COLUMNNAME, -1) from TABLENAME;时，它会在将响应发送到客户端之前立即尝试渲染部分。由于$(".question_list").append("<%= j render 'questions/type/list', a:a %>");变量仅在a块中定义，因此会引发您看到的错误。

最重要的是，要在客户端进行一些真正的渲染，您可能需要一个渲染库，如ReactJS。

Rails动态嵌套表单部分与JS本地

1 个答案: