在Turbo Streams中实现基于用户权限的客户端动态按钮显示

# app/controllers/application_controller.rb  class ApplicationController < ActionController::Base   # ... 其他代码 ...    def turbo_stream?     formats.any?(:turbo_stream)   end   helper_method :turbo_stream? end

<!-- app/views/resource/_resource.html.erb -->  <%= turbo_frame_tag resource do %>   <div id="<%= dom_id resource %>"        data-resource-url="<%= resource_path(resource, format: :json) %>">      <!-- 资源的其他内容 -->      <% if turbo_stream? || policy(resource).edit? %>       <%= link_to edit_resource_path(resource),                   class: "btn btn-primary #{'d-none' if turbo_stream?}",                   data: { resource_action: :edit } do %>         <i class="las la-edit"></i>         <span class="d-none d-lg-inline">           <%= t("buttons.edit") %>         </span>       <% end %>     <% end %>      <% if turbo_stream? || policy(resource).destroy? %>       <%= link_to resource,                   class: "btn btn-danger #{'d-none' if turbo_stream?}",                   data: {                     resource_action: :destroy,                     turbo_confirm: t("confirm.short"),                     turbo_method: :delete                   } do %>         <i class="las la-trash-alt"></i>         <span class="d-none d-lg-inline">           <%= t("buttons.remove") %>         </span>       <% end %>     <% end %>    </div> <% end %>

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

0

查看详情

# app/views/resources/_resource.json.jbuilder  json.extract! resource, :id, :name, :description # 提取其他字段 json.permissions do   json.edit policy(resource).edit?   json.destroy policy(resource).destroy? end

// app/javascript/controllers/turbostream_controller.js  import Rails from "@rails/ujs" import { Controller } from "@hotwired/stimulus"  export default class extends Controller {   connect() {     // 监听 turbo:before-stream-render 事件     // 这个事件在Turbo Stream渲染DOM之前触发     addEventListener("turbo:before-stream-render",                      (e) => { this.beforeStreamRender(e) })   }    beforeStreamRender(event) {     // 保存Turbo的默认渲染函数     const defaultAction = event.detail.render     // 覆盖Turbo的渲染函数，在默认渲染完成后执行我们的processStream方法     event.detail.render = (streamElement) => {       defaultAction(streamElement) // 先执行Turbo的默认渲染       try {         this.processStream(streamElement) // 再执行我们的自定义处理       } catch(error) {         console.error("Error processing Turbo Stream:", error)       }     }   }    processStream(streamElement) {     // 检查streamElement的action是否是会添加或更新DOM的类型     if (["prepend", "append", "update"].includes(streamElement.action)) {         // streamElement.children[0].content 是一个 DocumentFragment，包含即将渲染的HTML         var template = streamElement.children[0].content         // 在DocumentFragment中查找带有 data-resource-url 的元素         var templateDiv = template.querySelector('[data-resource-url]')         if (templateDiv != null) {           // 获取资源的ID，用于后续在DOM中查找已渲染的元素           var id = templateDiv.getAttribute('id')           if (id) {             this.setActionButtonVisibility(id)           }         }     }   }    setActionButtonVisibility(id) {     // 在实际的DOM中查找刚刚渲染的资源元素     var div = document.querySelector(`div#${id}`)     if (!div) return; // 如果元素不存在，则退出      var url = div.getAttribute('data-resource-url')     var editButton = div.querySelector('[data-resource-action="edit"]')     var destroyButton = div.querySelector('[data-resource-action="destroy"]')      if (!url || (!editButton && !destroyButton)) {       // 如果没有URL或没有权限按钮，则无需处理       return;     }      // 发起AJAX请求获取权限     Rails.ajax({       type: "GET",       url: url,       dataType: "json", // 明确指定期望的响应类型为JSON       success: (data, _status, _xhr) => {         try {           if (data && data.permissions) {             // 根据返回的权限数据切换按钮的 'd-none' 类             if (editButton) {               editButton.classlist.toggle('d-none', !data.permissions.edit)             }             if (destroyButton) {               destroyButton.classList.toggle('d-none', !data.permissions.destroy)             }           }         } catch(error) {           console.error("Error updating button visibility:", error)         }       },       error: (xhr, status, error) => {         console.error(`Failed to fetch permissions for ${url}:`, status, error);       }     })   } }

<!-- app/views/resource/index.html.erb -->  <div data-controller="turbostream">   <!-- 你的资源列表代码，例如： -->   <%= turbo_stream_from "resources" %>   <div id="resources">     <% @resources.each do |resource| %>       <%= render resource %>     <% end %>   </div> </div>