可排序的保存位置答案

【问题标题】：Sortable Save Position可排序的保存位置
【发布时间】：2015-03-01 03:10:22
【问题描述】：

我在 Rails 中使用嵌套模型表单，带有一个问答应用程序，类似于 Ryan Bates 的应用程序，这里：http://railscasts.com/episodes/196-nested-model-form-revised。

现在，我想让问题可排序，然后保存它们的位置，以便在 show.html.erb 中显示它们。

所以我的观点是这样的：

_form.html.erb：

<%= f.fields_for :questions do |builder| %>
  <ul class='sortable'>
     <%= render 'question_fields', f: builder %>
  </ul>
<% end %>
<%= link_to_add_fields "Add Question", f, :questions %>

_question_fields.html.erb：

<li>
  <%= f.label :content, "Question" %><br />
  <%= f.text_area :content %><br />
  <%= f.check_box :_destroy %>
  <%= f.label :_destroy, "Remove Question" %>
</li>

我的 jquery 只是一个简单的：

$(".sortable").sortable();

助手是：

def link_to_add_fields(name, f, association)
  new_object = f.object.send(association).klass.new
  id = new_object.object_id
  fields = f.fields_for(association, new_object, child_index: id) do |builder|
    render(association.to_s.singularize + "_fields", f: builder)
  end
  link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
end

我发现了关于通过 Ajax 保存的类似 SO 问题（使用 Sortable 的 serialize()），但我真的只是在寻找一种无需使用 AJAX 即可保存的解决方案。

【问题讨论】：

正在渲染的 html 是什么
@Rooster，我添加了问题中出现的错误。是这个意思吗？
@the_ 你能粘贴浏览器返回的html代码吗？（分页器html）
@MrMins，没有分页器吗？抱歉，我不清楚，但是在每个网页上，都有很多属于一本书的“页面”。但一切都在一个网页上。
您能否展示一下answer_fields 模板的外观以及您的link_to_add_fields 助手的作用？

标签： javascript jquery ruby-on-rails ruby jquery-ui

【解决方案1】：

好的，如您所见，当您为问题呈现字段时：

已存在于questions 集合中
被添加为一个新对象通过link_to_add_fields方法

每个问题表单构建器都有一个child_index，它要么是问题的ID，要么是新创建的（但未保存的）问题对象的object_id。这意味着您为特定问题添加的每个字段都嵌套在专用散列中，允许您将同名输入的不同值关联到每个问题。

所以你已经有一些与每个问题相关联的值......你应该做的是向question_fields添加一个隐藏的输入字段，它将存储问题的位置：

f.hidden_field :position, class: 'question-position'

在您的 javascript 代码中，创建一个函数，该函数将设计每个问题在可排序列表中的位置。这是它的样子（我没有测试过这段代码，但我相信它应该可以工作）：

function refreshPositions()
{
    $('.question-position').each(function() {
        var idx = $(this).closest('li').index();
        $(this).val(idx);
    });
}

这将遍历所有具有 question-position 类的隐藏输入，在可排序列表中找到其父级 <li> 的位置，并将该位置分配给隐藏字段值。这样做，您就有了与每个问题相关联的位置值。

将此函数与 jQueryUI 可排序事件 create 和 update 一起使用，以维护每个问题位置的最新值：

$(".sortable").sortable({
    create: refreshPositions,
    update: refreshPositions
});

（这是有效的，因为我们不希望给refreshPositions 提供任何参数，否则您需要为每个处理程序使用匿名函数并从那里调用refreshPositions）

鉴于此设置，当您提交表单时，您现在将在 Rails 应用程序中收到您的问题，其中包含一个 position 字段，您可以将其保存到您的 Question 模型中并用于稍后订购问题。

【讨论】：