Rails、Webpacker 和 Turbolinks - Javascript 在离开页面或完全重新加载之前不加载

Question

我有一个看起来像这样的 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. 每次访问该页面时都不会发生重复。

Answer 1

我面临着类似的情况。 我刚刚禁用了 turbolink

li{ 'data-turbolinks': 'false' }

但不确定这是否是一个合适的解决方案。