如何在Rails 7 + Import Map中使用Flowbite与Turbo？脚本失效求助

问题核心 #

Turbo通过局部更新切换页面，仅替换DOMContentLoaded为turbo:load不够——turbo:load仅在初始加载或页面刷新时触发，Turbo导航后的局部页面更新不会触发该事件，导致Flowbite组件未重新初始化。

具体解决步骤 #

1. 不修改Flowbite源码，通过Turbo事件手动初始化 #

在app/javascript/application.js中导入Flowbite后，监听Turbo的turbo:render事件（该事件在每次页面渲染完成后触发，包括Turbo导航后的局部更新），手动初始化组件：

import 'flowbite'

document.addEventListener('turbo:render', () => {
  // 初始化所有Flowbite组件
  window.Flowbite.initFlowbite();
})

2. 针对特定组件单独初始化（可选） #

如果只需要初始化部分组件，可单独调用对应构造函数：

document.addEventListener('turbo:render', () => {
  // 初始化下拉菜单
  new Flowbite.Dropdown(document.querySelectorAll('[data-dropdown-toggle]'));
  // 初始化模态框
  new Flowbite.Modal(document.querySelectorAll('[data-modal-toggle]'));
  // 根据需求添加其他组件（如Tabs、Accordion等）
})

3. 验证Import Map配置 #

确保config/importmap.rb中正确引入Flowbite v1.5.3：

pin "flowbite", to: "https://ga.jspm.io/npm:flowbite@1.5.3/dist/flowbite.js"

4. 兼容Turbo Frame场景（可选） #

如果使用Turbo Frame，额外监听turbo:frame-load事件：

function initFlowbite() {
  window.Flowbite.initFlowbite();
}

document.addEventListener('turbo:render', initFlowbite);
document.addEventListener('turbo:frame-load', initFlowbite);

内容的提问来源于stack exchange，提问作者Aleksandr