Rails 7 導入地圖 - 如何將腳本注入 HTML 模板？

Question

在帶有 webpacker 的 rails 6 中，您可以在視圖或模板中添加<%= javascript_pack_tag 'alerts' %>以注入一些 js。

這如何與導入地圖和 Rails 7 一起使用？

Answer 1

只要代碼在 import map 中正確，就可以引用它：

<script type="module">import "/assets/custom/alerts.js";</script>

假設文件是app/javascript/custom/alerts.js

在config/importmap.rb中引用為：

pin_all_from "app/javascript/custom", under: "custom"

並導入到 application.js 中：

import "custom/alerts"

---

編輯：我現在認為這是 Rails 7 中的反模式。使用 Stimulus 控制器非常容易。

刺激手冊供參考

例如，當用戶單擊“x”時關閉警報

// app/javascript/alerts_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    dismiss () {
        this.element.style.display = 'none';
    }
}

<div data-controller="alerts">
    <h2> Alert! </h2>
    <span data-action="click->alerts#dismiss"><i class="fas fa-times"></i></span>
</div>