1

我有一个使用 esbuild 作为 JS 捆绑器并导入了引导程序的 Rails 7 应用程序。

我试图弄清楚如何在主 application.js 文件“外部”访问任何 Bootstrap Javascript 功能 - 即假设我想以编程方式在特定页面上显示 Bootstrap 模式，如下所示：

var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {});
myModal.modal('show');

但是这不起作用，因为“引导程序”未知：

Uncaught ReferenceError: bootstrap is not defined

...即使 application.js 中的页面链接：

<%= javascript_include_tag "application", defer: true %>

关于如何在 application.js 本身之外的 JS 中访问“引导程序”的任何建议？

谢谢 ！

4

1 回答 1

1

假设您使用以下命令创建了您的 rails 应用程序：

rails new APP_NAME --css=bootstrap ...

这会创建您的应用程序，ESBUILD并为您留下app/javascripts/application.js如下所示的文件：

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

您现在需要在模式中编码以使用导入的引导程序。

bootstrap在导入行下方添加您在问题中的代码：

// Modals
var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {});
myModal.modal('show');

// Or to have it triggered using a button
document.getElementById('helpModalButton').addEventListener('click', event => {
  myModal.show();
});

这将打开事件处理程序

可以在每个组件的 Bootstrap Docs 页面上找到更多信息（同样适用于 Modals 和 Popovers）

https://getbootstrap.com/docs/5.1/components/modal/#passing-options

于 2022-02-17T22:41:01.487 回答