webpack-4 - 使用 turbolinks，响应式菜单在页面加载时显示移动设备，在后续 turbolinks 加载时显示桌面

Question

Foundation 6 响应式菜单在初始页面加载/刷新时显示移动版本，并且不是“响应式”。当 Turbolinks 加载页面时，会出现正确的菜单并且它是“响应式的”。“响应式”意味着 Javascript 在菜单之间切换。

这非常奇怪，因为通常的 Turbolinks 问题正好相反，它适用于初始页面加载，但不适用于后续页面。无论页面如何加载，所有其他与 Foundation 6 相关的 Javascript，如模式，都按预期工作。

我刚刚搬到了 Rails 5.2 的更新版本。我使用的是 5.2.1、webpacker 3.5 和基础 6.5.0-rc.4。一切都按预期工作。Turbolinks 没有更改版本。

我现在使用的是 Foundation 6.5.3、Rails 5.2.3、W​​ebpack 4.34.0、Stimulus 1.1.1 和 Turbolinks 5.2.0。除了使用必要的 Rails 和依赖项外，没有其他 Gems。我已经尝试过 Foundation 6.5.3、6.5.2、6.5.1、6.5.0、6.5.0-rc.4、6.4.3。似乎没有人恢复正常行为。

我试图重新排序我的 Webpack application.js 包文件以加载模块并初始化基础。我尝试在刺激控制器的初始化函数中初始化 Foundation。我尝试过使用和不使用 Jquery 来附加侦听器。我拒绝在 html 末尾尝试内联脚本，并在我的 CSP 中允许 unsafe-inline。我试过CSS解决方案，没有效果。我曾尝试弄乱 data-show-for 属性以及 html 可见性类，但这也无济于事。我试过添加和删除父元素，没有改变。浏览器控制台中没有错误。为“turbolinks:load”添加“ready”到监听器没有任何作用。我一直在寻找其他 Turbolinks 听众来尝试，但没有发现任何意义。我试图在 turbolinks 之外初始化它：加载侦听器，它仍然失败，但是这次在控制台中显示错误显示基础正在初始化两次。（试图在一个已经有 Foundation 插件的元素上初始化 responsive-toggle。）

我已经包含了所有相关文件来重新创建这个问题，不幸的是我目前没有一个实时站点可以放置。

rails new foundationtestsite -T -d postgresql -S --webpack=stimulus --skip-listen

package.json（去除绒毛）

{
  ...,
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "actioncable": "^5.2.3",
    "activestorage": "^5.2.3",
    "foundation-sites": "^6.5.3",
    "jquery": "^3.4.1",
    "rails-ujs": "^5.2.3",
    "stimulus": "^1.1.1",
    "turbolinks": "^5.2.0",
    "webpack": "^4.34.0",
    "what-input": "^5.2.3"
  },
  ...
}

application.js（webpack 入口/打包文件）

import $ from 'jquery'
import jQuery from 'jquery'
import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import cable from 'actioncable';

// import "controllers"
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /.js$/)

// Turbolinks
application.load(definitionsFromContext(context))
Turbolinks.start()

// images
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

// style sheets
import '../stylesheets/application.scss';

// foundation sites 6
import foundation from 'foundation-sites';
import '../javascripts/foundation_startup.js';

基础启动.js

import $ from 'jquery'
import jQuery from 'jquery'
import 'rails-ujs'
import 'foundation-sites'
$(document).on('turbolinks:load', function(){
    $(function(){ $(document).foundation() })
});

来自菜单部分的 html（呈现为正文的第一个元素）

<div data-controller="menu" data-target="menu.menu" class="cell shrink header medium-cell-block-container">

  <div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="medium" data-target="menu.titleBar">
    <button class="menu-icon" type="button" data-toggle="example-animated-menu"></button>
    <div class="title-bar-title">Menu</div>
  </div>

  <div class="top-bar" id="example-animated-menu" data-target="menu.topBar">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li><%= link_to "Home", root_path%></li>
      </ul>
    </div>
  </div>

</div>

标签： webpack-4turbolinkszurb-foundation-6ruby-on-rails-5.2