Rails：turbolinks:load 事件在正文内容更改之前触发

Question

我正在使用 turbolinks 5.2.0.rails 5.1.6 应用程序构建代码博客。

我想做一件非常简单的事情，就是在内容加载后突出显示代码（使用 js 插件），所以我在页面中添加了这个：

coffee:
  $(document).on "turbolinks:load", ->
    Highlighter.init()

在新负载上效果很好。但是，当您在另一个页面中并单击 link 转到该页面时，turbolinks:load 事件会在内容更新 之前触发，因此突出显示不起作用。

您知道发生了什么或如何解决这个问题吗？

编辑： 我知道 turbolinks:load 在内容更改之前被触发，因为我尝试添加 debugger:

coffee:
  $(document).on "turbolinks:load", ->
    debugger # => This is called before new content is rendered
    Highlighter.init()

编辑 2： 这是简单的 Highlighter.init():

class Highlighter
  @init: ->
    console.log "Trying to highlight"
    hljs.initHighlightingOnLoad()

Answer 1

问题是 hljs.initHighlightingOnLoad() sets up the plugin to work on only DOMContentLoaded or load。这些事件仅在初始页面加载时调用，因此之后就不会再调用它们。

相关事件顺序如下：

要解决此问题，您需要遵循 Custom Initialization 说明并针对 Turbolinks 进行调整：

$(document).on('turbolinks:load', function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

我建议将其包含在您的主应用程序 JavaScript 文件中。在 <body> 中的内联脚本标记中添加事件处理程序通常会导致问题，除非它们被正确删除。

Rails: turbolinks:load event is fired before body content changes