Rais8でPropshaftを使う環境ではapplication.jsでbootstrapをimportする
118 views
Post
bootstrap-rubygem
Bootstrap ruby gem for Ruby on Rails
Topics
BootstrapとTurbo Driveを組み合わせたときの問題と対処法
625 views
Post
@wakairo
Last edited
問題
HotwireのTurbo Driveでは高速化を図るために、ページ遷移時に全体をリロードせずに<body>タグ内のコンテンツを置き換える動作が基本となっています。 そのためか、Turbo Driveを有効にしていると、JavaScriptの動作が必要なBootstrapのコンポーネントが適切に動作しない場合があります。
例えば、タブのコンポーネントにおいて、ページ遷移の直後はカーソルキーでのタブの切り替えが動作しません。
対策
HotwireのStimulusを利用して、必要なBootstrapオブジェクトをページ遷移時に作成します。
対策の具体例
タブ・コンポーネントの場合、まず以下のようにタブの各要素を対象にしてgetOrCreateInstance()をconnect内で呼び出すStimulusコントローラapp/javascript/controllers/foo_controller.jsを作成します。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
const triggerTabList =
this.element.querySelectorAll(".nav-link");
triggerTabList.forEach(triggerEl => {
bootstrap.Tab.getOrCreateInstance(triggerEl);
});
}
}
次に以下のように、このStimulusコントローラfooを指定したhtmlタグでタブコンポーネントを囲みます。
<div data-controller="foo">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
</div>
</div>
以上で、Turbo Driveによるページ遷移時に、このタブ・コンポーネントを含むHTMLがロードされるとconnect()が呼び出され、
タブ用のBootstrapオブジェクトが存在していなかった場合には作成されるようになり、
その結果タブ・コンポーネントが正しく動作するようになります。
Rais8から標準となったPropshaftを使っている場合でのbootstrap-rubygemのインストールについてです。
結論としましては、公式GitHubレポジトリのインストール方法にある「Sprockets」のところより前はPropshaftでも同様に作業を進め、その後はPropshaftの場合は以下の2行をapp/javascript/application.jsに追加すればインストール完了です。
なお、Propshaftの場合のインストール作業全体の例は、こちらのページで紹介されています。ご参考まで。