Rails拖放和排序元素到nested_form

Question

我有一个可以有多个 PropertyLists 的模板，我的目标是拥有一个包含相关 PropertyLists 和可用 PropertyLists 的表单。 在这种形式中，我希望能够拖放和排序项目。 我正在使用带有 nested_form_fields 和 JQuery-ui（仅 jquery-ui/sortable 模块）的 Rails 5。

这是我的模型：

模板：

class Template < ApplicationRecord
  has_many :template_property_lists
  has_many :property_lists, through: :template_property_lists
  accepts_nested_attributes_for :property_lists
  validates_presence_of :name
end

属性列表：

class PropertyList < ApplicationRecord
  has_many :properties, -> { order(position: :asc) }, dependent: :destroy
  has_many :template_property_lists
  has_many :templates, through: :template_property_lists

  accepts_nested_attributes_for :properties, allow_destroy: true, reject_if: :all_blank
  acts_as_list scope: :template, top_of_list: 0

  validates_presence_of :name
  validates_uniqueness_of :name
end

模板属性列表：

class TemplatePropertyList < ApplicationRecord
  belongs_to :template
  belongs_to :property_list
end

还有 JavaScript 代码：

$(function() {
    $(".sortable").sortable({
        update: function(event, ui) {
            var index = ui.item.index();
            ui.item.find('input.position').val(index);
        }
    }).disableSelection();
});


$( function() {
  $( ".used, .available" ).sortable({
    connectWith: ".connected-sortable",
        placeholder: "ui-state-highlight"
  }).disableSelection();
} );

表格部分：

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:template) %>
    </h1>
  </div>

  <div class="panel-body">
    <div class="col-md-6">
      <div class="form-group <%= 'has-error' if @template.errors[:name].present? %>">
        <%= f.label :name, t(:name) %>
        <%= f.text_field :name, class: 'form-control' %>
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group <%= 'has-error' if @template.errors[:description].present? %>">
        <%= f.label :description, t(:description) %>
        <%= f.text_field :description, class: 'form-control' %>
      </div>
    </div>

  </div>
</div>

<!-- Template Property Lists -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:property_lists) %>
    </h1>
  </div>

  <div class="panel-body">
    <ul class="list-group">
      <li class="list-group-item">
        <div class="row text-center">
          <div class="col-md-1"></div>
          <div class="col-md-5">
            <%= label_tag t(:name) %>
          </div>
          <div class="col-md-5">
            <%= label_tag t(:description) %>
          </div>
          <div class="col-md-1 text-center"></div>
        </div>
      </li>
    </ul>

    <ul class="list-group used connected-sortable">
      <%= f.nested_fields_for :property_lists do |p| %>
      <li class="list-group-item">
        <%= p.hidden_field :position, class: 'position' %>
        <%= p.hidden_field :name %>
        <%= p.hidden_field :description %>
        <div class="row text-center">
          <div class="col-md-1">
            <span class="glyphicon glyphicon-sort"></span>
          </div>
          <div class="col-md-5">
            <%= p.object.name%>
          </div>
          <div class="col-md-5">
            <%= p.object.description%>
          </div>
          <div class="col-md-1 text-center"></div>
        </div>
      </li>
      <% end %>
    </ul>
  </div>

</div>

<!-- Available Property Lists -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:available_property_lists) %>
    </h1>
  </div>

  <div class="panel-body">
    <ul class="list-group">
      <li class="list-group-item">
        <div class="row text-center">
          <div class="col-md-1"></div>
          <div class="col-md-5">
            <%= label_tag t(:name) %>
          </div>
          <div class="col-md-5">
            <%= label_tag t(:description) %>
          </div>
          <div class="col-md-1"></div>
        </div>
      </li>
    </ul>

    <ul class="list-group available connected-sortable">
      <% @available_property_lists.each do |property_list| %>
      <li class="list-group-item">
        <%= hidden_field_tag :position, class: 'position' %>
        <%= hidden_field_tag :id, property_list.id %>
        <div class="row text-center">
          <div class="col-md-1">
            <span class="glyphicon glyphicon-sort"></span>
            <% property_list.id %>
          </div>
          <div class="col-md-5">
            <%= property_list.name %>
          </div>
          <div class="col-md-5">
            <%= property_list.description %>
          </div>
        </div>
      </li>
      <% end %>
    </ul>
  </div>
</div>

我的问题： 当我提交表单时，我希望选择与模板关联的 TemplateLists，这意味着 property_lists_attributes 将在 Template PropertyLists 部分具有 PropertyLists 并具有正确的 order 参数。请注意，这是一个简单的表单提交，而不是拖放或排序时的 AJAX。

Answer 1

为了解决这个问题，我在 available_property_lists 中使用了一个隐藏字段。通过添加：

<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][property_list_id]", property_list.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][position]", property_list.position, class: 'position' %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][template_id]", template.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][_destroy]", true, class: 'destroy' %>

还有隐藏字段：

<%= p.hidden_field :id %>
<%= p.hidden_field :position, class: 'position' %>
<%= p.hidden_field :property_list_id %>
<%= p.hidden_field :template_id %>
<%= p.hidden_field :_destroy, class: 'destroy' %>

和这个 Javascript 来排序和启用或禁用 _destroy 复选框：

$(function() {
    $(".used, .available").sortable({
        connectWith: ".connected-sortable",
        placeholder: "ui-state-highlight",
    });
    $(".available").on("sortremove", function(event, ui) {
        ui.item.find('input.destroy').val(false);
    });

    $(".used").on("sortremove", function(event, ui) {
        ui.item.find('input.destroy').val(true);
    });
});