Как я могу рендерить новое поле в jquery / rails?

Question

У меня проблема с рендерингом элемента в jquery / rails.

Я хотел бы сделать что-то вроде этого:

Когда пользователь нажимает кнопку «+», другое поле с выбранным ингредиентом должно отображаться ниже поля по умолчанию (поскольку напиток может иметьмного ингредиентов, и я не хочу указывать сумму).

Я не могу понять это, поэтому я должен попросить о помощи.

просмотров / напитков / new.html.erb

<%= form_for @drink do |f| %>

  <div class="form-group">
    <%= f.label :name %><br />
    <%= f.text_field :name, class:'form-control' %><br />
  </div>

  <div class="form-group">
    <%= f.label :category %><br />
    <%= f.select :category_id, Category.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'}, class:'form-control' %><br /><br />
  </div>

  <div class="form-group", id: "add-ingredients">
    <%= f.label :ingredient %><br />
    <%= f.select :ingredient_id, Ingredient.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select Few'}, class:'form-control' %><%= f.button "+", class:'btn btn-primary', id: 'btn-ingredients' %><br />
  </div>

  <div class="form-group">
    <%= f.label :preparation %><br />
    <%= f.text_area :preparation, class:'form-control'%><br />
  </div>

  <%= f.submit "Submit", class:'btn btn-primary' %>
  <%= link_to "Cancel", drinks_path, class:'btn btn-default' %>

<% end %>

application.js

$(document).ready(function(){
  $('#btn-ingredients').click(function(){
    $('#add-ingredients').append('<%= render("form-group") %>');
  });
});

Я былпытаться много раз, и это может быть что-то действительно легко, но я новичок и не имею других идей.

Answer 1

Ну, вы можете сделать это в некотором смысле, я просто хочу сказать, что многократное манипулирование напрямую с DOM является анти-паттерном.В настоящее время у вас есть фреймворки, такие как React / Redux или ClojureScript, которые обрабатывают глобальное состояние и автоматически воспроизводят DOM при изменении «ингредиентов» глобального состояния.

Возможно, не сейчас, но имейте это в виду.Обработать состояние в «Одностраничном приложении» сложно.

Answer 2

application.js - это статический файл, который предварительно не обрабатывается, например, ERB-процессором.Он переходит в браузер пользователя как есть, и при выполнении на стороне клиента этот код:

$('#add-ingredients').append('<%= render("form-group") %>');

выдает ошибку JS.

Чтобы это работало, вам нужно "развернуть" вызовrender("form-group") в HTML-код.Например:

$('#add-ingredients').append('<div class="form-group">...</div>');

Также обратите внимание, что append фактически добавляет вновь созданный элемент в конец элемента, а не ПОСЛЕ его.Поэтому после этого вызова новый элемент «form-group» будет добавлен в конец содержимого «# add-ингридиенты», что может быть нежелательно, поскольку у него тоже есть класс «form-group».