Как очистить переменные окна при использовании турболинков

Question

Используя ruby ​​на рельсах, у меня есть код, который запускается с помощью следующего сценария кофе;

$ = jQuery
$(document).on "turbolinks:load", ->
  if window.progress?
    // execute code on a div with an id of ```target```

На страницах, где код предназначен для запуска, у меня есть div с идентификатором target и тег сценария, который загружает progress параметр, например

<%= javascript_tag id: "window_vars" do %>
  window.progress = <%= raw graph.data.to_json %>
<% end -%>

Если нет никаких ссылок, то это работает нормально, код срабатывает на тех страницах, для которых он предназначен, и не срабатывает на других страницах. Тем не менее, если я включаю turbolinks 5.0.1 и посещаю страницу, где код не предназначен для триггера, затем на страницу, где код действительно запускается, а затем обратно на страницу, где код не предназначен для триггера, код срабатывает на последней странице с исключением. Кажется, что turbolinks не очищает переменную window.progress между загрузками страниц.

Как мне убедиться, что переменные окна, загруженные через скрипт, очищаются между страницами?

Answer 1

Я столкнулся с этой же проблемой сегодня, делая что-то подобное. Я предположил, что глобальные переменные сохраняются между посещениями турболинков. Это действительно имеет смысл, поскольку страница не перезагружается; контент просто перезаписывается. Мое решение состояло в том, чтобы уничтожить данные до того, как turbolinks отобразит новую страницу.

document.addEventListener('turbolinks:before-render', () => {
  delete window.progress;
})

Обратите внимание, что delete Метод не работает с переменными JavaScript, объявленными с var, но работает для атрибутов, назначенных window как в моем случае. При использовании varзахочешь сделать var progress = null;

У вас есть много вариантов, где это сделать в жизненном цикле запроса. Я выбрал предварительную визуализацию, чтобы гарантировать, что данные будут "уничтожены" только в случае успешного запроса.

Answer 2

Обходной путь - не полагаться на window.progress, чтобы определить, присутствует ли график, лучше использовать идентификатор, например:

if $('#target').length > 0