时间戳

首页 > 解决方案 > 如何在 jquery/rails 中呈现新字段？

javascript - 如何在 jquery/rails 中呈现新字段？

问题描述

我在 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 %>

应用程序.js

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

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

标签： javascriptjqueryruby-on-railsruby

解决方案

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

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

推荐阅读