Rails dynamisch verschachtelte Formular teilweise mit lokalen in JS hinzufügen

Question

Ich bin verschiedene Eingaben abhängig von den Aktionen des Benutzers auf meinem Formular anhängen. Wenn der Benutzer auf das Optionsfeld "Liste" klickt, möchte ich verschachtelte Eingaben für possibilities anzeigen. Ich versuche, den Cocoon-Edelstein zu verwenden, der es ermöglicht, dynamische Eingabefelder zu erstellen. Meine Form sieht wie folgt aus:

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

Und das ist die JS verschiedenen partials Anzeigen je nachdem, wo der Benutzer klickt:

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

, wenn der Benutzer klickt auf die Checkbox „Liste“, ich dies anzeigt Teil die die variable a muss gebaut werden:

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

Problem ist die js:

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

löst einen Fehler

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

weil ich glaube, a noch nicht gebaut wird, wenn die JS gelesen wird.

Wie kann ich das umgehen und dynamisch meine verschachtelten Felder erstellen, wenn der Benutzer auf das Optionsfeld "Liste" klickt?

Answer 1

Es scheint eine Verwechslung zwischen serverseitige Rendering und Client-Seite hier Rendering zu sein:

• serverseitige Rendering in Ihrer Rails-Anwendung geschieht. Es ist der Prozess , der alle Ihre Erb in HTML und Javascript verwandelt.
• Das clientseitige Rendering erfolgt im Browser des Benutzers. Das passiert, wenn der Browser das Javascript ausführt.

Dies bedeutet, dass Sie keine ERB mit Javascript rendern können. Genauer gesagt, wenn Ihre Ruby-Anwendung versucht, $(".question_list").append("<%= j render 'questions/type/list', a:a %>"); zu rendern, wird versucht, das Teil sofort wiederzugeben, bevor die Antwort an den Client gesendet wird. Da die a Variable nur in Ihrem <%= f.fields_for :answer do |a| %> Block definiert ist, wird der angezeigte Fehler angezeigt.

Fazit: Um auf der Client-Seite echtes Rendering durchzuführen, benötigen Sie wahrscheinlich eine Rendering-Bibliothek wie ReactJS.