turbolinks - 对特定页面仅使用一次 turbolinks:load 事件？

Question

我有一些代码只想在我的应用程序的一页上运行，所以在我的 HTML 中，我使用了以下内联 JS：

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

但是，当用户离开该页面时 - 该代码仍在每次后续访问时运行。

如何仅对特定页面使用 turbolinks:load 事件？

我是否需要以某种方式“拆除”该事件处理程序？我将如何防止它影响我可能拥有的任何其他 turbolinks:load 事件？

Answer 1

首先，检查你是否需要运行这段代码turbolinks:load——你可能不需要！<script>页面底部包含的 s 将可以访问所有 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');
});