Рельсы, добавляющие динамически вложенную форму, частичную с локальными в JS

Question

Я добавляю различные входы в зависимости от действий пользователя в моей форме. Если пользователь нажимает на переключатель «список», я хочу отображать вложенные входы для possibilities. Я пытаюсь использовать драгоценный камень кокона, который позволяет создавать динамически вводимые поля. Моя форма выглядит следующим образом:

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

Проблема в ЯШАХ:

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 читается.

Как я могу обходить это и динамически строить свои вложенные поля, когда пользователь нажимает на кнопку «Список»?

Answer 1

Там, кажется, путаница между стороне сервера визуализации и визуализации на стороне клиента здесь:

• стороне сервера визуализации происходит внутри вашего приложения рельсы. Это процесс , который превращает все ваши erb в html и javascript.
• Клиентский рендеринг выполняется в браузере пользователя. Это то, что происходит, когда браузер выполняет javascript.

Это означает, что вы не можете отобразить ERB с помощью Javascript. Точнее, когда ваше приложение ruby ​​пытается отобразить $(".question_list").append("<%= j render 'questions/type/list', a:a %>");, оно пытается отдать частичное прямо перед отправкой ответа клиенту. Поскольку переменная a определена только в вашем блоке <%= f.fields_for :answer do |a| %>, она вызывает ошибку, которую вы видите.

Нижняя линия - для выполнения реального рендеринга на стороне клиента вам, вероятно, понадобится библиотека рендеринга, такая как ReactJS.