javascript - 如何使轨道上的项目可排序

Question

使用 Rails 4 和 Ruby 1.9.3。样式由基于 bootstrap 3 的内部开发的 gem 处理。

我一直在寻找这个问题的答案，并找到了许多不同的示例，这些示例展示了如何使用 View 中的基本列表来执行此操作。 Railscast 就是我看过的这样一个例子。

http://railscasts.com/episodes/147-sortable-lists

但是，我试图使用部分以 Rails 嵌套形式实现此目的，但没有成功。遗憾的是，我是 ruby​​、rails 的新手，并且没有 javascript 的先验知识，所以这都是一个逐步的学习曲线。

我的服务模型通过服务地点与地点模型相关。 service_places.position 字段保存停靠点的顺序。

我的服务嵌套表单 (_form.html.erb) 如下所示:

<!-- Adds the Service_Places (stops) associations via partial (sort applied in model) -->
<div>
  <div class="links" id="sortable">
    <%= link_to_add_association 'Add Stop', f, :service_places, :class => "btn btn-default", :data => {"association-insertion-method" => "after" } %>
  </div>
  <%= f.fields_for :service_places do |service_places| %>
    <%= render 'service_place_fields', :f => service_places %>
  <% end %>
</div>

我的 service_place 部分如下所示:

<!-- This will hold the partial form for service places -->
<div class="nested-fields">
  <%= f.label :service_place, "Stops", :class=>"col-sm-2 control-label" %>
  <div class="col-sm-1">
    <%= f.text_field :position, :class=> "form-control", :placeholder => "Position" %>
  </div>  
  <div  class="col-sm-3">
    <%= f.collection_select :place_id, Place.where('active = true').order(:place_name), :id, :place_name, :prompt => "Select Place" %>
  </div>
  <div>
    <%= link_to_remove_association "Remove Stop", f, :class => "btn btn-default" %>
  </div>
</div>

我开始考虑尝试为每个 service_place 部分 DIV 标记分配一个 ID，但无法让它工作。

我想知道的问题是:

1) 是否可以允许用户对表单内的项目重新排序？并将新订单保存在服务器中？

2)如果可能的话，有人可以给我一个关于如何去做这件事的提示吗？

预先感谢您花时间查看这篇文章。

Answer 1

我的同事向我展示了一种使用“充当列表”gem 来实现此目的的方法。
他的博客可以在这里找到:

http://nicholshayes.co.uk/blog/?p=344

为了使其正常工作，我进行了如下所示的修改。

1)在我的服务模型中，我添加了这三个方法:

  # Used in the positioning of service places using the acts_as_list gem
  def method_missing(symbol, *args, &block)
    if acts_as_list_method?(symbol)
      pass_method_to_service_service_place(symbol, args.first)
    else
      super
    end
  end

  # Used in the positioning of service places using the acts_as_list gem
  def pass_method_to_service_service_place(symbol, service_place)
    raise "A Service_Place is needed for re-ordering places" unless service_place.kind_of? ServicePlace
    service_place.send(symbol) if service_place
  end

  # Used in the positioning of service places using the acts_as_list gem
  def acts_as_list_method?(symbol)
    ActiveRecord::Acts::List::InstanceMethods.instance_methods.include?(symbol.to_sym)
  end

2) 添加路线

  resources :services, :concerns => :paginatable, only: [:create, :destroy, :edit, :index, :new, :show, :update] do

    # Required for the re-ordering of the routes
    resources :service_places do
      member do
        get :move_up
        get :move_down
      end
    end

  end

3)修改SERVICE show.html

<% @service.service_places.reorder("service_places.position asc").each do |serviceplace| %>

  <dd>

    <% if user_signed_in? %>
      <% if @service.first?(serviceplace) %>
        <%= link_to('', move_up_service_service_place_path(serviceplace, service_id: @service), class: "btn btn-default btn-xs glyphicon glyphicon-arrow-up invisible") %>
      <% else %>
        <%= link_to('', move_up_service_service_place_path(serviceplace, service_id: @service), class: "btn btn-default btn-xs glyphicon glyphicon-arrow-up") %>
      <% end %>

      <% if @service.last?(serviceplace) %>
        <%= link_to('', move_down_service_service_place_path(serviceplace, service_id: @service), class: "btn btn-default btn-xs glyphicon glyphicon-arrow-down invisible") %>
      <% else %>
        <%= link_to('', move_down_service_service_place_path(serviceplace, service_id: @service), class: "btn btn-default btn-xs glyphicon glyphicon-arrow-down") %>
      <% end %>
    <% end %>

    <!-- Unfortunately this is not very efficient way of showing the place because it calls the db for each item. -->
    <%= Place.find(serviceplace.place_id).place_name %>

  </dd>

<% end %>