如何在Ruby on Rails的turbo:frame-load事件后重新初始化Flowbite组件？

使用Flowbite下拉组件及flowbite.turbo.js时，Turbo框架渲染完成后Flowbite未重新加载，导致下拉菜单无法正常展开。需实现在turbo:frame-load事件触发后重新初始化Flowbite组件。

现有代码 #

application.js #

import 'flowbite';
import "flowbite/dist/flowbite.turbo.js";

index.html.erb #

<%= turbo_frame_tag "example" do %>
  <!-- 无法展开的Flowbite下拉菜单 -->
  <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
    Dropdown button 
    <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </button>
  <!-- 下拉菜单 -->
  <div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
      </li>
    </ul>
  </div>
<% end %>

example.html.erb #

<%= turbo_frame_tag "example", src: url_for(action: :example), loading: 'lazy' do %>
  Loading...
<% end %>

1. 调整application.js的导入与事件监听 #

修改application.js，移除重复导入并添加turbo:frame-load事件监听，手动初始化Flowbite下拉组件：

import 'flowbite';
// 单独导入下拉组件初始化方法，避免重复加载flowbite.turbo.js导致的冲突
import { initDropdowns } from 'flowbite';

// 监听Turbo框架的frame加载完成事件
document.addEventListener('turbo:frame-load', () => {
  // 重新初始化所有下拉组件
  initDropdowns();
});

2. 验证组件属性匹配 #

确保下拉按钮的data-dropdown-toggle属性值与对应下拉菜单的id完全一致（当前代码已满足此要求，无需修改）。

扩展说明 #

如果需要同时初始化Flowbite的其他组件（如模态框、工具提示等），可以导入对应的初始化方法并在事件回调中调用：

import { initDropdowns, initModals, initTooltips } from 'flowbite';

document.addEventListener('turbo:frame-load', () => {
  initDropdowns();
  initModals();
  initTooltips();
});

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