如何在特定页面仅使用一次turbolinks:load事件？

Question

如何在特定页面仅使用一次turbolinks:load事件？

6

我有一些代码只想在应用的一个页面上运行，因此在我的HTML中使用以下内联JS：

<script>
  $(document).on('turbolinks:load', function() {
    console.log("Ground control to major tom?")
  });
</script>

然而，当用户离开该页面时，相应的代码仍然会在每个后续访问中运行。

如何仅将turbolinks：load事件用于特定页面？

我需要以某种方式“拆除”该事件处理程序吗？我该如何防止影响可能存在的任何其他turbolinks：load事件？

- Greg Blass

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dom Christie · Accepted Answer

首先，检查是否需要在 turbolinks:load 上运行此代码 - 你可能不需要！页面底部包含的 <script> 将可以访问所有 DOM 元素，因此监听 turbolinks:load 可能是不必要的。

如果您确定需要处理 turbolinks:load，则有几种选项可用于撤销您的处理程序。

选项1. 使用命名函数，然后在调用 off 时引用该函数。（这种方法也与 document.removeElementListener 兼容。）

;(function () {
  function onLoad () { console.log("Ground control to major tom?") }

  $(document).on('turbolinks:load', onLoad);

  $(document).on('turbolinks:before-render', function() {
    $(document).off('turbolinks:load', onLoad);
  });
})()

选项2。 给你的事件命名空间。jQuery支持自定义事件名称，因此使用这种方法，您无需引用处理程序。

$(document).on('turbolinks:load.my-namespace', function() {
  console.log("Ground control to major tom?")
});

$(document).on('turbolinks:before-render', function() {
  $(document).off('turbolinks:load.my-namespace');
});