我正在構建我的模板并完成最初的步驟。我在 Rails 7.0.2.4、turbo-rails 1.1.1、Bootstrap 5 上。
在我的布局模板中，我有以下內容：
= javascript_include_tag "application", data:{turbo:{track: "reload"}}, defer: true
哪些鏈接到我的 app/javascript/application.js，這里的相關部分是：
import * as bootstrap from "bootstrap"
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
上面的第二部分啟用了引導工具提示。
回到我的模板中，我將其分解為三個 Turbo Frames：
%turbo-frame{id: "main_frame", data:{turbo:{action: "advance"}}}
.container-fluid
.row.flex-nowrap
.col-auto.col-md-3.col-xl-2.px-sm-2.px-0.bg-dark
%turbo-frame{id: "sidebar", data:{turbo:{action: "advance"}}}
.col
%turbo-frame{id: "content", data:{turbo:{action: "advance"}}}
= yield
首先是main_frame，然后分為Sidebar和Content frame。單擊側邊欄中具有 date-turbo-frame: "content" 屬性的鏈接，用必要的內容替換 Content 框架。
現在，在大多數完整的內容框架上，該框架的頂部都有一個導航標題，其左右兩側有一個按鈕，中間有一個文本：
%turbo-frame{id: "content", data:{turbo:{action: "advance"}}}
.row
.d-flex
.p-2
%a{href: path, data:{turbo:{frame: "content"},
bs:{toggle: "tooltip", placement: "bottom",
title: "Back"}},
aria:{label: "Back"}}
%i.bi.bi-arrow-left-circle-fill{aria:{hidden: "true"}}
.flex-grow-1
// Some Text
.p-2
%a{href: new_path, data:{turbo:{frame: "new"},
bs:{toggle: "tooltip", placement: "bottom",
title: "New"}},
aria:{label: "New"}}
%i.bi.bi-plus{aria:{hidden: "true"}}
當您導航到此替換的內容時，工具提示不起作用。但是，當您通過瀏覽器重新加載完整頁面時，工具提示會突然起作用，因為代碼在頭部。
有沒有辦法讓框架加載必要的 Javascript？
uj5u.com熱心網友回復：
基本上使用 Turbo，您的 JS 被添加到頭部，并且不會在頁面加載時進行修改。
所以當你打電話時：
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
基本上，它將在您的 JS 附加到應用程式的確切時間搜索 DOM 以查找請求的 DOM 節點。如果你的應用重繪 了一個 turbo Frame，那么它就不會被播放。請看我最近回復的這個帖子：如何在帶有 Turbo、ImportMaps 和 Stimulus 的 Rails 7 應用程式中加載頁面特定的自定義 Javascript 函式？
如果您希望在加載新內容時重繪 工具提示，那么您必須使用 Stimulus，將代碼放入connect()Stimulus 控制器的方法中，并將該控制器附加到可能包含工具提示的應用程式的每個部分。
如果您不想附加刺激物，您還可以將控制器附加到<html>標簽并在方法內添加突變觀察者（https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver）connect()應用程式中許多地方的控制器。（javascript/application.js如果您愿意，您也可以添加 Mutation Observer。刺激的目的實際上是防止向 Mutation Observers 發送垃圾郵件，但如果您有很多 Tooltips，它仍然是一個可行的解決方案）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507467.html