Я использую библиотеку Flickity .
Это мое HTML:
<section class="controls-inside controls-light p-0" data-flickity='{ "imagesLoaded": true, "wrapAround": true }'>
Хорошо работает при первой загрузке, которая создает это HTML:
<section class="controls-inside controls-light p-0 flickity-enabled is-draggable" data-flickity="{ "imagesLoaded": true, "wrapAround": true }" tabindex="0">
Но как только я перехожу на любую другую страницу и пытаюсь go вернуться на домашнюю страницу (где находится этот код), он генерирует только первый код вверху (то есть неинициализированный версия).
В настоящее время это мой TL код:
$(document).on("turbolinks:load", () => {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
})
Итак, учитывая, что я использую инициализацию HTML, как мне справиться с этим с TL?
Редактировать 1
Я также открыт для инициализации Flickity с помощью JS, если он не был инициализирован с помощью HTML. В любом случае я в порядке, поэтому он работает.
Edit 2
В моем application.js у меня теперь есть следующее:
$(document).on("turbolinks:load", () => {
var Flickity = require('flickity');
var flkty = new Flickity( 'section[data-flickity]', {
imagesLoaded: true,
wrapAround: true,
});
})
Это вроде работает. Что происходит, когда я пытаюсь перейти на другую страницу и go обратно на ту, на которой есть ползунок, я вижу, что он загружается дважды. Например, он загружает ползунок вначале, и я вижу его на полпути во время загрузки панели, вся страница снова обновляется. Чувствуется, что он делает вдвое больше работы. Я просто хочу, чтобы он загружался один раз.
Он также вызывает следующие ошибки в моей консоли браузера.
При первой загрузке страницы:
flickity.js:57 Uncaught TypeError: Cannot read property 'option' of undefined
at new Flickity (flickity.js:57)
at HTMLDocument.<anonymous> (application.js:43)
at HTMLDocument.dispatch (jquery.js:4670)
at HTMLDocument.elemData.handle (jquery.js:4490)
at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
at r.pageLoaded (turbolinks.js:948)
at turbolinks.js:872
Flickity @ flickity.js:57
(anonymous) @ application.js:43
dispatch @ jquery.js:4670
elemData.handle @ jquery.js:4490
./node_modules/turbolinks/dist/turbolinks.js.e.dispatch @ turbolinks.js:75
r.notifyApplicationAfterPageLoad @ turbolinks.js:994
r.pageLoaded @ turbolinks.js:948
(anonymous) @ turbolinks.js:872
flickity.js:57 Uncaught TypeError: Cannot read property 'option' of undefined
at new Flickity (flickity.js:57)
at utils.js:217
at Array.forEach (<anonymous>)
at utils.js:201
Если я очищаю ошибки из моей консоли, перейдите в другое место и вернитесь назад, это единственная ошибка в моей консоли при загрузке второй страницы:
flickity.js:47 Bad element for Flickity: section[data-flickity]
Что может быть причиной этих ошибок и как их исправить?
Редактировать 3
В моем application.js я включил Flickity соответственно.
import '../src/flickity.pkgd.min'
Кроме того, мой package.json выглядит так:
{
"name": "myapp",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/actiontext": "^6.0.2-2",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"bootstrap": "^4.4.1",
"data-confirm-modal": "^1.6.2",
"expose-loader": "^0.7.5",
"flickity": "^2.2.1",
"jquery": "^3.5.0",
"local-time": "^2.1.0",
"popper.js": "^1.16.1",
"stimulus": "^1.1.1",
"trix": "^1.0.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
Редактировать 4
Вот как выглядит мой application.js:
import '../src/flickity.pkgd.min'
$(document).on("turbolinks:load", () => {
var Flickity = require('flickity');
var flkty = new Flickity( 'section[data-flickity]', {
imagesLoaded: true,
wrapAround: true,
});
})
Вот ошибка, которую я получаю при загрузке первой страницы в моей консоли JS.
Редактировать 5
Все более или менее полностью исправлено, но я все еще вижу двойную перезагрузку всякий раз, когда я go возвращаюсь на страницу, которая ранее была загружена с помощью Flickity.
Например, рассмотрим следующий поток:
- Go to
home page ш ih Flickity (загрузить один раз) - Go до
Article#New без Flickity (загрузить один раз, и Flickity не загружает или выдает JS ошибка при последнем обновлении). - Go вернуться к
home page с помощью Flickity (он начинает загружаться и примерно на 1/4 или 1/3 пути через эту начальную страницу загружается, он выполняет полную страницу refre sh и загружает всю страницу). Ссылка на страницу sh заметна, потому что она происходит через 1-2 секунды после начала загрузки страницы.
Сначала я думал, что это потому, что я инициализирую Flickity дважды, то есть один раз с помощью JS. в ответе ниже и один раз через HTML примерно так:
<section id="featured-header" class="controls-inside controls-light p-0" data-flickity='{ "imagesLoaded": true, "wrapAround": true }'>
Поэтому я поменял местами селектор JS для id этого тега и удалил инициализацию HTML data-flickity, но это все еще делает то же самое поведение. то есть вместо этого я тестировал этот код:
<section id="featured-header" class="controls-inside controls-light p-0">
Так что это наводит меня на мысль, что это как-то связано с JS.
Кстати, кажется, что он на самом деле просто перезагружается что section[data-flickity] не обязательно вся страница. Он также не перезагружает любую другую страницу, когда я перемещаюсь по различным ссылкам. Это происходит только для элемента section[data-flickity].