时间戳

首页 > 解决方案 > Rails：turbolinks：在正文内容更改之前触发加载事件

ruby-on-rails - Rails：turbolinks：在正文内容更改之前触发加载事件

问题描述

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

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

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

这在新负载下效果很好。但是，当您在另一个页面中并单击链接进入该页面时，该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()

标签： ruby-on-railsturbolinks

解决方案

问题在于hljs.initHighlightingOnLoad()将插件设置为仅 DOMContentLoaded适用于或load. 这些事件仅在初始页面加载时被调用，因此在此之后，它们将不再被调用。

以下是相关事件的顺序：

  1. DOMContentLoaded
  2. turbolinks:load（您的代码设置要调用的荧光笔load）
  3. load（初始化突出显示）
  4. 导航到另一个页面
  5. turbolinks:load（您的代码设置要调用的荧光笔load）
  6. 而已！load在整个页面加载之前不会再次触发

要解决此问题，您需要遵循自定义初始化说明并将它们调整为 Turbolinks：

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

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

推荐阅读