使用 importmap 将 Rails 7 中仅在一页中使用的 Javascript 放置在何处

Question

当使用带有导入映射的 Rails 7 时，我应该在哪里放置只应由一个视图执行的代码？

具体来说，我有一个需要在加载时运行一些 Javascript 代码的视图。我的 JavaScript 看起来像这样：

import {TheController} from "./TheController"

let controller = new TheController();

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    controller.onLoad();
  }
};  

如何设置 Javascript 环境以便document.onreadystatechange代码仅由所需的视图执行？（当我将此代码放入由 导入的文件中时，一切几乎都能正常工作，但随后它会被每个application.js视图执行。）

我怀疑答案是创建单独的 importmaps 和 importmap_tags；但是，我可以在 Rails 7 中找到有关如何执行此操作的任何演示。

Answer 1

正如@Azrklm 指出的那样，答案包含在这段视频https://youtu.be/PtxZvFnL2i0?t=1287从时间 21:38 开始。

假设我们有一些 JavaScript，我们只想在名为 的视图上运行FancyView。以下是步骤

1. 例如，将 唯一的代码放入FancyView其自己的文件中FancyView.js（如果需要，可将其从 中删除application.js）。

2. FancyView.js在导入映射中 添加一行：pin "FancyView"

3. 添加行<%= yield :head %> to application.html.erb`。（这告诉 Rails，各个视图/布局可能想要向网页的头部添加附加信息。）

   <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   <%= javascript_importmap_tags %> <%# This loads application.js %>
   <%= yield :head %>
   

4. 添加一个javascript_import_module_tag到视图：

   <% content_for :head do %>
     <%= javascript_import_module_tag "FancyView" %>
   <% end %>