如何在 jquery/rails 中呈现新字段？答案

【问题标题】：How I can render new field in jquery/rails?如何在 jquery/rails 中呈现新字段？
【发布时间】：2018-10-03 19:06:00
【问题描述】：

我在 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") %>');
  });
});

我尝试了很多次，这可能很容易，但我是新手，没有其他想法。

【问题讨论】：

你可能想试试github.com/nathanvda/cocoon 之类的东西

标签： javascript jquery ruby-on-rails ruby

【解决方案1】：

嗯，你可以通过某些方式做到这一点，我只想说直接多次操作 DOM 是一种反模式。如今，您拥有 React/Redux 或 ClojureScript 等框架，它们可以处理全局状态并在全局状态“成分”更改时自动重新渲染 DOM。

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

【讨论】：

【解决方案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-ingredients”内容的末尾，这可能是不可取的，因为它也有“form-group”类。

【讨论】：