在 Rails 7 应用程序中使用 bootstrap javascript

Question

我有一个正在运行的 Rails 7 应用程序，它使用 esbuild 作为 JS 捆绑器并导入了 bootstrap。

我试图弄清楚如何访问主 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 中的“bootstrap”有什么建议吗？

谢谢你！

Answer 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 文档页面上找到更多信息（这同样适用于 Modals 和 Popover）

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

Answer 2

我不确定如何帮助修复导入库中的错误，但要从我的应用程序内的 JS 文件（但在 application.js 之外）引用引导程序，我在 Javascript 文件中复制了

import * as bootstrap from "bootstrap"

命令...

//app/javascript/popovers.js

console.log('Loading popovers...')

import * as bootstrap from "bootstrap"

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

然后我从我的主

application.js

导入该文件：

//app/javascript/application.js

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

对我来说，我试图引用

bootstrap

，这样我就可以初始化弹出框。