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質問にあるコードをimport 行の下に追加します。

// 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 ページを参照してください (モーダルとポップオーバーにも同じことが当てはまります)。

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

于 2022-02-17T22:41:01.487 に答える