使用turbolinks和highcharts // LazyHighCharts阻止执行以前的JavaScript

Question

我使用turbolinks 5和rails 5版本以及最新的Highcharts。 Ť

LazyHighCharts为Turbolinks5提供功能并使用

包装图表构建javascript

(function() { document.addEventListener("turbolinks:load", function() { //code window.chart_my = new Highcharts.Chart(options); }); })()

但是当我导航离开之前使用turbolink加载图形的页面时，我在新加载的页面上出错了。

Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13

看起来所有以前加载了"turbolinks:load"的javascript都会重新评估并导致高图引发错误，因为在新DOM中没有向其提供高图图形的元素。

我尝试从文档中解除"turbolinks:load"事件的绑定，但它不起作用。无论如何它会重新评估它。

考虑解叉to LazyHighCharts，重写layout_helper，所以javascript在dom元素之后输出，但这会使页面变慢，所以页面流会是

loaded-dom（图） 评估js（同步） - ＆GT; load-dom（图） 评估js（同步） ---＆GT; load-dom（图） 评估js（同步） 它会减慢页面加载我猜猜。

也许这里的人有解决这个问题的方法。

Answer 1

向lazy_high_charts提出拉取请求

document.addEventListener("turbolinks:load", function(e) {
  // code
  e.target.removeEventListener(e.type, arguments.callee);
});