与设计用户关联的多个模型 - 根据角色选择填写一个模型

Question

我正在使用以下字段进行用户注册：电子邮件、密码和角色。

当用户从选择框（学生、教师、管理员）中选择一个角色时，我希望应用为这些角色之一呈现嵌套字段。每个角色存储不同的信息，并作为自己的模型存在。

我有一个 javascript，它根据当前选择显示和隐藏适当的 div。

问题是，除非我填写所有模型的字段，而不仅仅是当前选择的模型，否则表单无法提交。我意识到这是因为我正在渲染所有部分，然后简单地用 javascript 隐藏它们。

问题：如何使用 javascript 仅动态呈现包含当前所选模型的模型字段的部分？

新注册视图

h2>Sign up</h2>

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
  <%= f.error_notification %>

  <h3>Login Details</h3>

  <br />
  <div class = "row">
    <div class = "col-md-3"></div>
    <div class = "col-md-6"><div class = "panel panel-midnight">
      <div class = "panel-heading"><h3 class = "panel-title">Create an account</h3></div>
      <div class = "panel-body">
      <div class="form-inputs">

        <%= f.input :email, :required => true, :autofocus => true, :placeholder => "Enter email address" %>
        <br />
        <%= f.input :password, :required => true, :placeholder => "Password" %>
        <br />
        <%= f.input :password_confirmation, :required => true, :placeholder => "Confirm Password" %>
        <br />
        <%= f.input :role, :label => "I am a:", :collection => ["Student","Teacher","Admin"], :required => true %>
      </div>

      <h3>Profile</h3>


      <div id = "student_fields">
       <%= render partial: "student_fields", locals: {:f => f} %>
      </div>

      <div id = "teacher_fields">
        <%= render partial: "teacher_fields", locals: {:f => f} %>
      </div>

      <div id = "admin_fields">
        Admin
      </div>

      <br />

  <% end %>

  <br />

  </div>

  <div class = "col-md-3"></div>
  </div>
  </div>
  </div>


<! Javascript to show/hide specific fields for each role>


<script>


  $(document).ready(function(){
     if($('#user_role').val() != "Student"){
        $("#student_fields").css('display','none');
     }
     else{
        $("#student_fields").css('display','block');
     }

     $('#user_role').change(function(){
        if($(this).val() != "Student"){
          $("#student_fields").css('display','none');
        }
        else{
          $("#student_fields").css('display','block');
        }
     })
  });

  $(document).ready(function(){
       if($('#user_role').val() != "Teacher"){
          $("#teacher_fields").css('display','none');
       }
       else{
          $("#teacher_fields").css('display','block');
       }

       $('#user_role').change(function(){
          if($(this).val() != "Teacher"){
            $("#teacher_fields").css('display','none');
          }
          else{
            $("#teacher_fields").css('display','block');
          }
       })
    });

  $(document).ready(function(){
     if($('#user_role').val() != "Admin"){
        $("#admin_fields").css('display','none');
     }
     else{
        $("#admin_fields").css('display','block');
     }

     $('#user_role').change(function(){
        if($(this).val() != "Admin"){
          $("#admin_fields").css('display','none');
        }
        else{
          $("#admin_fields").css('display','block');
        }
     })
  });
</script>

Answer 1

JavaScript 不能只“呈现”您想要的字段。它可以显示/隐藏（正如您尝试做的那样）或请求动态加载内容（又名 AJAX）。如果您想走后一条路线，请考虑将您的个人资料部分更改为如下所示：

<h3>Profile</h3>
<div id="profile"></div>

然后，您需要设置 javascript 以根据选择的角色向唯一 url 发出请求，并用结果填充#profile 部分。这是一个基于 jquery 的想法...

$('#user_role').on('change', function(){
  switch( $('#user_role').val() ){
    case 'Teacher': targetUrl = '...'; break;
    case 'Admin': targetUrl = '...'; break;
    default:  targetUrl = '...'; break;
  }
  $('#profile').load( targetUrl );
});

一个警告：通常最好尝试在没有 ajax 的情况下让事情正常工作，然后再添加 ajax，尤其是在您刚开始的时候。您可能需要考虑一个稍微修改的注册，它更像是一个向导——用户可以首先提供用户详细信息（包括角色），并且当用户成功时，响应可能是要求用户提供其角色特定的详细信息已创建。