将选定的元素从jQuery UI选择传递到Rails控制器

Question

我使用的是Rails 3，Map拥有并属于许多Collection，反之亦然。

已经存在的..。

我有一个表单，允许用户选择将在一个集合中的几个映射。为此，我在网格中使用jQuery UI和可选方法。

网格是这样构建的：

<ol id="selectable">
<% for map in @user.maps %>
    <li class="ui-state-default">
        <strong><%= map.title %></strong><br>
        <%= image_tag(map.thumbnail_url) %>
    </li>
<% end %>
</ol>

看起来是这样的：

​

​

当用户完成选择时，所选映射(它们的<li>标记)将具有类.ui-selected。

我需要的是..。

如何将所选映射的in ()传递给控制器()以便将它们添加到新集合中？在控制器里我该怎么做？这里的最佳实践是什么？

我想做的事..。

1. 我考虑过为表单编写一个自定义提交处理程序，该处理程序将遍历所有这些li.ui-selected，并设法提取ID，然后将它们合并到一个隐藏的表单字段中，并最终提交表单。然后，在控制器中，我再次拆分隐藏表单字段，提取ID并从数据库中获取Maps。
2. 另一种方法可能是拥有一个collection_select，它以某种方式与jQuery选择同步。我拥有的collection_select是： <%= collection_select :集合，:map_ids，@collection.user.maps，:id，:title，{ :selected => @collection.map_ids }，{ :class => "map_select"，:multiple => true，:size => '10'，:name => 'collectionmap_ids‘} %>

不过，两者听起来都有点烦躁。难道没有更简单或者更像JS/Rails的东西吗？

Answer 1

我的结局是这样的。这是我的collection_select。

<%= collection_select :collection, 
    :map_ids, 
    @collection.user.maps, 
    :id,
    :title, 
    { :selected => nil },
    { :class => "map_select hiddenElement", :multiple => true, :size => '10', :name => 'collection[map_ids][]' }

以下是创建个人容器的方式：

<ol id="selectable">
  <% for map in current_user.maps %>
    <% if @collection.maps.include? map %>
      <li class="singleMapContainer ui-selected">
    <% else %>
      <li class="singleMapContainer">
    <% end %>
      <div class="singleMapInfo">
        <span class="mapId" style="display:none;"><%= map.id %></span>
        <strong><%= map.title %></strong><br>
        <%= map.created_at %><br>
        <%= image_tag(map.thumbnail_url) %>
      </div>
    </li>
  <% end %>
</ol>

以下是提交表单时同步它们的Javascript：

$("#new_collection, .edit_collection").submit(function(){
  // iterate over each selected map container element
  $("li.ui-selected").each(function(){
    var mapId = $(this).find("span.mapId").html();  // find the map ID
    $("#collection_map_ids option[value='" + mapId + "']:first")[0].selected = true;  // synchronize the multiple select box
  });
  return true;
});

Answer 2

将所有内容序列化到隐藏的输入是一个很好的选择。如果您不喜欢，一种(可以说是)更简洁的方法是只对控制器进行AJAX调用；这甚至可能是可选择的select事件处理程序的一部分。然后，这可以序列化选定的项(我认为这甚至可以作为选择事件的参数，但我完全忘记了，也太懒了，也懒得去查找它)到AJAX调用的POST (或get或PUT)数据。