javascript - 如何在 jquery/rails 中渲染新字段？

Question

我在 jquery/rails 中渲染元素时遇到问题。

我想做这样的事情:

当用户单击“+”按钮时，应在默认字段下方呈现另一个包含选择成分的字段(因为饮料可能有很多成分，而我不想指定数量)。

我实在是想不通，所以才来求助。

views/drinks/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。

也许不是现在，但请记住这一点。处理“单页应用程序”中的状态很棘手。