Компоненты визуализации Turbolinks 5.2.0 дважды => хорошо понимать полный список событий и исправить этот эффект - PullRequest
Новая
       83

Компоненты визуализации Turbolinks 5.2.0 дважды => хорошо понимать полный список событий и исправить этот эффект

0 голосов
/ 17 июня 2020

Возникла проблема, когда пользователь хочет go вернуться к предыдущему виду ⬅️ (View -1).

Это происходит, когда:

  • щелкают по значку "go назад »внутри приложения, чтобы вернуться к предыдущему виду.
  • Или через кнопку chrome назад.
  • Или проведением пальцем по панели.

Результат тот же.

Например, если на предыдущей странице отображался календарь (полный календарь. js) (но все компоненты построены с помощью JavaScript библиотек), этот календарь будет построен дважды.

Позволяет этому пользователю вернуться в ➡️ Просмотр N и go обратно в Просмотр - 1 ⬅️ ... В конце у него будет 3 календаря ....

Проблема уже в неправильные события, названные

turbolinks:before-cache Vs turbolinks:before-render

Я делюсь здесь файлом àpplication.js, который у меня есть 

require('@rails/ujs').start();
require('turbolinks').start();
require('@rails/activestorage').start();
require('channels');
console.log('not enter yet inside turbolink');

import 'bootstrap';
import 'controllers';
import 'stylesheets/application';
import { localStorageScript } from '../admin/localStorageScript';
import { directUploads } from '../admin/direct_uploads';

import { allComponentForAdminDesk } from '../admin/allComponentForAdminDesk';

// I have tryied to add that event to fight the issue 
// ?? that s not do the job
document.addEventListener('turbolinks:before-render', function () {
  Turbolinks.clearCache();
});

// I have tryied to add that event to fight the issue 
// ?? that s not do the job neither
document.addEventListener('turbolinks:before-cache', function () {
  Turbolinks.clearCache();
});

document.addEventListener('turbolinks:load', () => {
  Turbolinks.clearCache(); // ?? that s not do the job neither
  document.querySelector('body').style.display = 'none';
  localStorageScript();
  allComponentForAdminDesk();
  directUploads();
  console.log('inside turbolink');
});

, просто чтобы поделиться также некоторыми используемой версией библиотек внутри приложения package.json

 ...
 {
  "dependencies": {
    "@fancyapps/fancybox": "3.5.7",
    "@fullcalendar/bootstrap": "4.4.0",
    "@fullcalendar/core": "4.3.1",
    "@fullcalendar/daygrid": "4.3.0",
    "@fullcalendar/interaction": "4.3.0",
    "@fullcalendar/list": "4.3.0",
    "@fullcalendar/timegrid": "4.3.0",
    "@mapbox/mapbox-gl-geocoder": "^4.5.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.0.1",
    "select2": "^4.0.12",
    "stimulus": "^1.1.1",
    "swiper": "5.2.1",
    "tailwindcss": "^1.1.2",
    "turbolinks": "5.2.0",
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }

Кто-нибудь тоже сталкивался с этой проблемой? как лучше всего использовать всю мощность турболинки 5?

1 Ответ

0 голосов
/ 30 июня 2020

предложение

Наконец-то я выбрал это решение. Здесь дело в том, что проблема касается конкретного действия c, поэтому конкретных представлений.

Чтобы иметь дело с <meta name="turbolinks-cache-control" content="no-cache">

Объявление помощника

Я создал помощник #TurbolinksApiHelper

module TurbolinksApiHelper

  def turbolinks_action_to_be_cleared
    [
      'edit',
      'new',
      'calendar',
      'stats' #... other keywords could be added here
    ]
  end
  
  def clear_cache(path_str)
    turbolinks_action_to_be_cleared.any? { |word| path_str.include?(word) }
  end
end

Вызов помощника из частичного заголовка 

<meta charset="utf-8">
<meta name="ROBOTS" content="NOODP">
<meta name="viewport" content="initial-scale=1">
<title>
  <%= content_for(:title) %> - <%= application_title %>
</title>
<% if clear_cache(request.env["PATH_INFO"]) %>
  <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

Я почти уверен, что есть лучший способ, описанный в Turbolinks do c, но на данный момент мне никогда не удавалось справиться с этим с суммой JavaScript, вызываемой в моем приложении rails. Если у кого-то есть предложение получше, меня это интересует. Спасибо.

...