时间戳

首页 > 解决方案 > 如何在 Turbolinks 中使用 HTML 初始化 Flickity

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

问题描述

我正在使用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">

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

这是目前我的TL代码：

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

因此，鉴于我正在使用 HTML 初始化，我该如何使用 TL 来处理这个问题？

编辑 1

如果尚未通过 HTML 初始化 Flickity，我也愿意通过 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 控制台中加载第一页时遇到的错误。

首次加载错误-flickity

编辑 5

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

例如考虑以下流程：

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

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

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

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

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

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

标签： javascriptruby-on-railsturbolinksruby-on-rails-6flickity

解决方案

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

npm install flickity

然后，在application.css中需要 Flickity CSS 文件

*= require flickity.css

turbolinks:load然后，在您的 JS 文件中，您可以像对工具提示和弹出框所做的那样初始化 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,
        });
    }
})

推荐阅读