Rails: turbolinks: событие load запускается до изменения содержимого тела - PullRequest
Новая
       7

Rails: turbolinks: событие load запускается до изменения содержимого тела

0 голосов
/ 28 августа 2018

Я создаю блог с кодом на приложении rails 5.1.6, которое использует turbolinks 5.2.0.

Я хочу сделать очень простую вещь: выделить код (используя плагин js) после загрузки контента, поэтому я добавил это на страницу: 

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

Это хорошо работает при новой загрузке. Однако, когда вы находитесь на другой странице и нажимаете на ссылку, чтобы перейти туда, событие turbolinks:load запускается до обновления содержимого , поэтому выделение не работает.

Знаете ли вы, что происходит или как это исправить?

EDIT: Я знаю, что 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()

1 Ответ

0 голосов
/ 28 августа 2018

Проблема в том, что hljs.initHighlightingOnLoad() настраивает плагин для работы только на DOMContentLoaded или load. Эти события вызываются только при начальной загрузке страницы, поэтому после этого они никогда не вызываются снова.

Вот порядок соответствующих событий:

  1. DOMContentLoaded
  2. turbolinks:load (ваш код настраивает подсветку для вызова load)
  3. load (который инициализирует подсветку)
  4. Перейти на другую страницу
  5. turbolinks:load (ваш код настраивает подсветку для вызова load)
  6. Вот и все! load не запускается снова до полной загрузки страницы

Чтобы это исправить, вам нужно следовать инструкциям Custom Initialization и адаптировать их для Turbolinks: 

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

Я бы порекомендовал включить его в файл JavaScript вашего основного приложения. Добавление обработчиков событий в теги встроенного скрипта в <body> часто может вызвать проблемы, если они не будут удалены должным образом.

...