如何动态地将新选项添加​​到关联资源的一组 Formtastic 复选框中？

Question

假设我有一个格式表单，它创建一个商店并允许选择它提供的服务：

<%= semantic_form_for @store do |f| %>
  <%= f.inputs :services, :as => :check_boxes, :collection => Service.all %>
  <%= f.buttons %>
<% end -%>

我希望允许用户添加新服务，以防他在表单中的选项中看不到它。

有很多简单的嵌套表单元素添加的示例，比如项目的任务条目，甚至还有 有助于这个，但我还没有找到任何创建新资源的资源，因此它将显示为操作系统复选框或选择选项的一部分。

Answer 1

让它以这种方式工作：

<%= semantic_form_for @store do |f| %>
  <%= f.inputs :services, :as => :check_boxes, 
                          :collection => Service.all,
                          :wrapper_html => { :id => 'service_fields' } %>  
  <%= f.buttons %>
<% end -%>

在复选框字段列表周围的父列表项中添加一个 id，以便在提交具有新服务名称的文本字段后可以通过此 js 访问它：

<input type="text" id="new_service_name" />
<input type="button" value="ok" id="btnSave" />                                

<script type="text/javascript">        
  $(document).ready(function() {
    $('#btnSave').click(function() {
      $.ajax({
        url: '/admin/services.json',
        type: 'POST',
        dataType: 'json',
        data: 'service[name]=' + $('#new_service_name').val(),
          success: function(data) {
            addCheckbox(data);
          }
        });
      });
    });

    function addCheckbox(name) {
      var container = $('#service_fields fieldset ol');
      var inputs = container.find('input');
      var id = inputs.length+1;

      //var html = '<input type="checkbox" id="cb'+id+'" value="'+name+'" /> <label for="cb'+id+'">'+name+'</label>';
      var html = '<li><label for="store_services_'+id+'"><input id="store_services_'+id+'" name="store[services][]" type="checkbox" value="'+id+'" />'+name+'</label></li>';
      container.append($(html));
    }
</script>

然后，在 ServicesController 中：

class ServicesController < ApplicationController  
  respond_to :json

  def create
    service = Service.create!(params[:service])    
    respond_with(service)
  end
end