Ruby on rails 排名模型gem的排序UI

我正在尝试使用gem

排名模型制作排序UI

档案：

gem 'ranked-model'
gem 'jquery-ui-rails' #for drag-and-drop

application.js：

//= require jquery-ui/widgets/sortable

lesson.rb：

课程

lessons_controller.rb-添加了排序功能：

class LessonsController < ApplicationController
  def index
    @lessons = Lesson.rank(:row_order)
  end

  def sort
    lesson = Lesson.find(params[:lesson_id])
    lesson.update(lesson_params)
    render body: nil
  end

  private
    def lesson_params
      params.require(:lesson).permit(:name, :row_order_position)
    end
end

因此，路线如下所示：


lessons.html.haml：

%h1 Lessons
%table.table
  %thead
    %tr
      %th Name
  %tbody#item{"data-model_name": "lesson.class.name.underscore", "data-update_url": "lesson_sort_path(lesson)"}
    - @lessons.each do |lesson|
      %tr
        %td= lesson.name

表_sort.js：

$(function(){
  $('#item').sortable({
    update: function(e, ui){
      var item = ui.item;
      var item_data = item.data();
      var params = {_method: 'put'};
      params[item_data.modelName] = { row_order_position: item.index() }
      $.ajax({
        type: 'POST',
        url: item_data.updateUrl,
        dataType: 'json',
        data: params
      });
    }
  });
});

排序工作正常，但不会持久化，我在日志中发现以下错误。知道如何保持排序吗？


您应该反转这两行，因为
出租方排序路径（课程）
需要
课程
变量。这就是为什么更新时会出现错误的路径。可能是（我不熟悉Haml）：

我想出了一个有效的解决办法

观点：

.list-group.lesson-sortable
  - @lessons.each do |lesson|
    = content_tag "div", id: "lesson-#{lesson.id}", data: { model_name: lesson.class.name.underscore, update_url: lesson_sort_path(lesson)} do
      = lesson.name

JS:

是的，在引入变量之前加入
lesson
逻辑确实是一个愚蠢的错误。虽然它没有使代码工作
  %tbody#item{"data-model_name": "lesson.class.name.underscore", "data-update_url": "lesson_sort_path(lesson)"}
- @lessons.each do |lesson|

  %tbody#item
- @lessons.each do |lesson|
  %tr{"data-model_name": "lesson.class.name.underscore", "data-update_url": "lesson_sort_path(lesson)"}

.list-group.lesson-sortable
  - @lessons.each do |lesson|
    = content_tag "div", id: "lesson-#{lesson.id}", data: { model_name: lesson.class.name.underscore, update_url: lesson_sort_path(lesson)} do
      = lesson.name

$(function(){
  $('.lesson-sortable').sortable({
    update: function(e, ui){
      let item = ui.item;
      let item_data = item.data();
      let params = {_method: 'put'};
      params[item_data.modelName] = { row_order_position: item.index() }
      $.ajax({
        type: 'POST',
        url: item_data.updateUrl,
        dataType: 'json',
        data: params
      });
    },
    stop: function(e, ui){
      console.log("stop called when finishing sort of cards");
    }
  });
});