在哪里放置 Javascript 仅在一页中使用 Rails 7 with importmap

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 导入的文件中时，almost 一切正常，但随后由 every 视图执行。）

我怀疑答案是创建单独的 importmaps 和 importmap_tags；但是，我可以在 Rails 7.

中找到有关如何执行此操作的任何演示

Answer 1

DHH 解释的很好请看看 https://youtu.be/PtxZvFnL2i0?t=1287

Answer 2

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

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

将 FancyView 独有的代码放在自己的文件中，例如 FancyView.js（如有必要，将其从 application.js 中删除）。
在导入图中为 FancyView.js 添加一行：pin "FancyView"

添加行 <%= yield :head %> to application.html.erb`。（这告诉 Rails 个人 views/layouts 可能想在网页的头部添加额外的信息。）

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

添加一个javascript_import_module_tag到视图：

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

Answer 3

如果有类似问题的人发现了这个问题，我发现@Zack 的答案非常简洁并且正是我所需要的，但有两个重要的警告：

我无法为我的 js 使用 capcase 命名约定。 FancyView 需要 fancyView.
javascript_import_module_tag 应该在您的 javascript_importmap_tags
之后
```
<%= javascript_importmap_tags %>
<%= yield(:head) %>
```

现在 rails github 页面上也对此进行了解释：https://github.com/rails/importmap-rails#selectively-importing-modules

谢谢@Zack！

在哪里放置 Javascript 仅在一页中使用 Rails 7 with importmap

Where to place Javascript used in one page only in Rails 7 with importmap

javascript

ruby-on-rails

import-maps

ruby-on-rails-7