JQuery Sortable + Rails - 更新外部模型

Question

我遵循Railscast关于创建Sortable Lists的剧集，并成功创建了一个可更新其内部模型的可排序列表 - 在我的应用程序中，项目有很多步骤（这些步骤嵌套在项目中） ，并且我创建了一个具有可排序步骤的表格，当我打开project_steps路径时，可以访问该表格。

我现在要做的是从edit_project_steps路径（步骤中有许多图像）更新外部模型（图像）。我不确定如何将Railscast中的工作扩展到更新外部模型;现在，当我尝试将edit_project_steps路径内的图像进行排序，我得到的错误 “的ActionController :: RoutingError（无路由匹配[POST] ”/项目/ 1 /步骤/ 2 /编辑“）”

会有人能够指向正确的方向吗？

这是我到目前为止有：

的routes.rb

resources :projects do 
    resources :steps do 
     collection {post :sort} 
     end 
     match "steps/:id" => "steps#number", :as => :number 
    end 

    resources :images do 
    collection {post :sort} 
    end 

images.rb

class ImagesController < ApplicationController 
    # Sorts images 
    def sort 
    render nothing: true 
    end 

end 

步骤/ edit.html.erb

条

<div class="imageGallery span8"> 
    <p style="margin: 5px 0px;"><b>Step Images</b> - Click and drag to rearrange</p> 
     <div class = "wrapper"> 
     <div class="scrolls"> 
      <div class="imageDiv" id="stepImages" data-update-url="<%= sort_images_url %>"> 
      <div class="images"> 
       <%= render :partial => 'images/image', :collection => @step.images.all %> 
      </div> 
      <div class="clear"></div> 
      </div> 
     </div> 
     </div> 

<% #drag images %> 
<script> 
$(".imageDiv .images").sortable({ 
    cursor: "move", 
    axis: 'x', 
    update: function(){ 
    $.post($(this).data('update-url'), $(this).sortable('serialize')); 
     } 
    }).disableSelection(); 
</script> 

耙路线

  sort_project_steps POST  /projects/:project_id/steps/sort(.:format)  steps#sort 
       project_steps GET  /projects/:project_id/steps(.:format)   steps#index 
           POST  /projects/:project_id/steps(.:format)   steps#create 
       new_project_step GET  /projects/:project_id/steps/new(.:format)  steps#new 
      edit_project_step GET  /projects/:project_id/steps/:id/edit(.:format) steps#edit 
        project_step GET  /projects/:project_id/steps/:id(.:format)  steps#show 
           PUT  /projects/:project_id/steps/:id(.:format)  steps#update 
           DELETE  /projects/:project_id/steps/:id(.:format)  steps#destroy 
       project_number   /projects/:project_id/steps/:id(.:format)  steps#number 
         projects GET  /projects(.:format)       projects#index 
           POST  /projects(.:format)       projects#create 
        new_project GET  /projects/new(.:format)      projects#new 
        edit_project GET  /projects/:id/edit(.:format)     projects#edit 
         project GET  /projects/:id(.:format)      projects#show 
           PUT  /projects/:id(.:format)      projects#update 
           DELETE  /projects/:id(.:format)      projects#destroy 
        sort_images POST  /images/sort(.:format)       images#sort 
         images GET  /images(.:format)        images#index 
           POST  /images(.:format)        images#create 
        new_image GET  /images/new(.:format)       images#new 
        edit_image GET  /images/:id/edit(.:format)      images#edit 
         image GET  /images/:id(.:format)       images#show 
           PUT  /images/:id(.:format)       images#update 
           DELETE  /images/:id(.:format)       images#destroy 
          root   /           projects#index 

这里是我想要排序的页面上的图像：

Answer 1

它竟然是一系列的问题。 ..我的最终代码是有兴趣的人：

个images.rb

def sort 
    params[:image].each_with_index do |id, index| 
     Image.update_all({position: index+1}, {id: id}) 
    end 
    render nothing: true 
    end 

从你的错误步骤/ edit.html.erb

<div class="imageGallery span8"> 
    <p style="margin: 5px 0px;"><b>Step Images</b> - Click and drag to rearrange</p> 
    <div class = "wrapper"> 
     <div class="scrolls"> 
     <div id="images" data-update-url="<%= sort_images_url %>"> 
      <% @step.images.order("position").each do |image| %> 
      <%=content_tag_for(:div, image) do %> 
       <%= render :partial => 'images/image', :locals => {:image=> image} %> 
      <% end %> 
      <% end %> 
     </div> 
     </div> 
    </div> 

<% #drag images %> 
<script> 
$("#images").sortable({ 
    cursor: "move", 
    axis: 'x', 
    update: function(){ 
    $.post($(this).data('update-url'), $(this).sortable('serialize')); 
    } 
    }).disableSelection(); 
</script>