Rails、Webpacker 和 Turbolinks - Javascript 直到离开页面或完全重新加载才加载

问题描述

我有一个如下所示的 javascript 文件：

// javascript/packs/org_chart.js
require("orgchart") // from jquery-orgchart plugin
document.addEventListener("turbolinks:load",() => {
  console.log('org chart loaded')
  $('#org_chart').orgchart({
    ... 
  });
})

以及如下所示的 org_chart.html.erb 页面：

<div id="org_chart"></div>

<%= javascript_pack_tag 'org_chart','data-turbolinks-track': 'reload' %>

当我导航到 org_chart 路线时，我希望脚本能够运行，但我得到一个空白页面和空白控制台。 我可以看到脚本已包含在内，但未运行。

当我离开页面时，脚本似乎在运行，但由于该元素不再位于页面上，我收到错误消息。每次导航时，我都会在控制台中继续出现相同的错误，直到刷新页面。

如果我导航回脚本运行并且组织结构图正确加载。如果我在导航到页面后进行刷新，组织结构图也会正确加载。

当我在任何页面和 org_chart 页面之间来回导航时，脚本会再次运行，并且每次组织结构图都会自我复制。

我该怎么做：

1. 让脚本在我导航到 org_chart 页面时运行。
2. 让脚本在我离开 org_chart 页面时不运行（我认为这是 javascript_pack_tag 应该做的）
3. 避免每次访问页面时重复发生。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）