使用 Rails Active Storage 和 Stimulus 對圖像或附件進行排序

Question

我試圖在我的 rails 表單中創建一個可排序的畫廊部分。 我已經設置了一些基礎知識，例如將 position 列添加到 active_storage_attachments 數據庫、活動存儲本身、刺激、刺激可排序或 sortable.js、視圖以及所有要上傳和排序的內容，但我無法弄清楚 javascript 端或 Z50194C103F52C06正確地做到這一點。 我曾嘗試將其他一些版本的黑客組合在一起，但無濟於事。 我已經嘗試遵循 GoRails 可排序刺激指南，但我無法弄清楚如何將其路由到附件，而不是我所在項目的實際 model，例如項目。 我不需要對項目進行排序，而是對項目中的圖像進行排序。 我現在得到的錯誤是

NoMethodError (undefined method `each_with_index' for nil:NilClass):

我擔心我沒有獲取其他人會得到的正確參數，因為我正在嘗試連接到附件 ID，而不是我目前正在使用的項目 ID。

所以我正在使用 Rails 6、Ruby 3、Stimulus JS、Stimulus Sortable、Postgres、Active Storage 和 Webpacker。

對於我的 controller，我添加了這個來自 GoRails 論壇帖子的內容：

def sort_attachments
   
    params[:attachments].each_with_index do |id, index|
      ActiveStorage::Attachment.where(id: id).update_all(position: index + 1)
    end
  
    head :ok
  end

我在 before_action 中允許：sort_attachments

resources :projects, only: [:sort_attachments] do
    member do
      patch 'projects/sort/:id', action: :sort_attachments, as: 'sort_attachments'
    end
end

和我的表單視圖：

 <% if @project.persisted? %>
<% if @project.images.attached? %>
    <section class="pb-6  px-0">
        <div data-controller="sortable" data-sortable-animation-value="150" data-sortable-url="<%= sort_attachments_project_path %>" class="flex flex-wrap -mx-4 -mb-8">
          <% @project.images.order(:position).each do |images| %>
              <div data-id="<%= dom_id(attachment) %>" class="px-4 mb-8" >
                <%= image_tag images.variant(resize_to_limit: [150, 150]).processed, class: "rounded shadow-md"%>
              </div>
          <% end %>  
        </div>
     </section>
<% end %>
<% end %>

這是從那個論壇帖子和 Stackoverflow 上使用 Jquery 的另一個帖子混合而成的。 我寧願堅持使用刺激。

我的可排序 controller 是：

import { Controller } from "stimulus"
import Sortable from "sortablejs"

export default class extends Controller {
  connect() {
    this.sortable = Sortable.create(this.element, {
      group: 'shared',
      animation: 150,
      onEnd: this.end.bind(this)
    })
  }

  end(event) {
    let id = event.item.dataset.id
    let data = new FormData()
    data.append("position", event.newIndex + 1)

    Rails.ajax({
      url: this.data.get("url").replace(":id", id),
      type: 'PATCH',
      data: data
    })
  }
}

任何幫助將不勝感激！ 先感謝您

Answer 1

您沒有發送附件，而是僅發送 param:positions，因此您收到 null 異常錯誤。 如果您想以這種特殊方式解決它，您需要使用 Ajax 調用發送附件參數。 但是，從上面的代碼中並不清楚:attachments 參數應該包含什么。

運行代碼並將這一行添加到 controller 方法的頂部以進行調試。 當您現在發送 ajax 請求時，它應該為您提供參數中包含的數據raise params.inspect

你已經解決了這個問題，讓你自己很難。 如果可能，您不應觸摸附件數據庫。 我不知道為什么您希望每次用戶登錄時畫廊都相同，但是您可以通過在索引方法中將圖像設置為自己的變量來輕松解決這個問題，例如@images作為二維數組，然后將圖像作為二維數組發送，並將響應作為與 controller 排序方法中的 JS 相同的變量返回，如下所示：

@images = param[:images].map do |attachment, position|
            [[attachment, position]]
           end

如果您希望每次用戶登錄時排序都相同，那么一些緩存應該就足夠了。