3

当使用带有导入映射的 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 中找到任何关于如何做到这一点的演示。

4

2 回答 2

2

正如@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 %>
于 2022-02-14T22:41:29.453 回答
0

DHH 解释得很好，请看一下 https://youtu.be/PtxZvFnL2i0?t=1287

于 2022-02-09T20:57:03.887 回答