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>