如何在 Turbolinks 中使用 HTML 初始化 Flickity

Question

我正在使用Flickity library。

这是我的 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">

但是一旦我导航到任何其他页面并尝试返回主页（此代码所在的位置），它只会生成顶部的第一个代码（即未初始化的版本）。

目前这是我的TL 代码：

$(document).on("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

既然我正在使用 HTML 初始化，我该如何使用 TL 来处理呢？

编辑 1

如果 Flickity 尚未通过 HTML 初始化，我也愿意通过 JS 初始化 Flickity。无论哪种方式对我来说都很好，所以它有效。

编辑 2

在我的application.js 中，我现在有以下内容：

$(document).on("turbolinks:load", () => {
  var Flickity = require('flickity');
  var flkty = new Flickity( 'section[data-flickity]', {
      imagesLoaded: true,
      wrapAround: true,
  });
})

这有点工作。发生的情况是，当我尝试导航到另一个页面并返回具有滑块的页面时，我可以看到它加载了两次。如，它最初加载滑块，然后在加载栏进度中途我看到它，整个页面再次刷新。所以感觉它正在做两倍的工作。我只想加载一次。

它还会在我的浏览器控制台中产生以下错误。

第一次加载页面时：

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

一切都或多或少地完全修复了，但每当我返回之前使用 Flickity 加载的页面时，我仍然会看到两次重新加载。

例如考虑以下流程：

• 使用 Flickity 转到 home page（加载一次）
• 在没有 Flickity 的情况下转到 Article#New（加载一次，Flickity 不会加载或在每次最新更新时抛出 JS 错误）。
• 使用 Flickity 返回home page（它开始加载，在初始页面加载的大约 1/4 或 1/3 处，它会进行完整的页面刷新并加载整个页面）。页面刷新很明显，因为它发生在页面开始加载后大约 1 到 2 秒。

我最初认为这是因为我两次初始化 Flickity，即一次在下面的答案中使用 JS，一次通过 HTML，如下所示：

<section id="featured-header" class="controls-inside controls-light p-0" data-flickity='{ "imagesLoaded": true, "wrapAround": true }'>

所以我将 JS 选择器换成了这个标签的 id 并删除了 data-flickity 的 HTML 初始化，但它仍然执行相同的行为。即我测试了这段代码：

<section id="featured-header" class="controls-inside controls-light p-0">

所以这让我相信这与 JS 有关。

顺便说一句，它似乎只是重新加载section[data-flickity] 不一定是整个页面。当我浏览各种链接时，它也不会重新加载任何其他页面。这只发生在 section[data-flickity] 元素上。

Answer 1

您可以删除应用程序src目录中的JS文件并使用NPM安装它

npm install flickity

然后，在 application.css

中需要 Flickity CSS 文件

*= require flickity.css

然后，在您的 JS 文件中，您可以在 turbolinks:load 上初始化 Flickity，就像您对工具提示和弹出框所做的那样。

import Flickity from 'flickity';

$(document).on("turbolinks:load", () => {
    if($('section[data-flickity]').length > 0) {
        var flkty = new Flickity( 'section[data-flickity]', {
            imagesLoaded: true,
            wrapAround: true,
        });
    }
})