与使用常规方法时的同一页面相比，Aurelia 使用下拉菜单在 Foundation 中发出不同的 css 代码

Question

System Info:

Windows 7 x64

aurelia-framework: "^1.0.0-beta.1.1.3"

"foundation-sites": "^6.2.1"

skeleton-navigation-webpack

如何使同时使用 aurelia 和 foundation 时发出的 css 代码与在标准网页中单独使用 foundation 时发出的代码相同？这导致下拉菜单无法正常工作。

我正在使用 skeleton-navigation-webpack 并且只是用 foundation html 和 css 代替导航栏和一个空的欢迎页面

Aurelia 代码

main.js 初始化基础框架

 aurelia.start().then(a => a.setRoot('app', document.body))
    .then(a => {
      // Initialize any frameworks you want to use
       $(document).foundation();
      console.log('foundation loaded')
    });

基础 $(document).foundation(); 的初始化似乎可以正常显示下拉菜单，但 css 略有不同

nav-bar.html 代码发出前的片段

      <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
        <li class="has-submenu">
          <a href="#">One</a>
          <ul class="submenu menu vertical" data-submenu>
            <li repeat.for="row of router.navigation">
              <a href.bind="row.href">${row.title}</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>

在 Aurelian 中导入基础 css 并在标准 html 页面中导入 link。唯一的区别是在 html 页面中通过 Aurelia

使用 repeat.for for <li>

Aurelia 中的代码

<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
        <li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
          <a href="#" tabindex="0">One</a>
          <ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
            <!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
              <a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
            </li><!--</view>--><!--<view>-->

标准html页

<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
      <li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
        <a href="#" tabindex="-1">One</a>
        <ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
          <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0"><a href="#" tabindex="-1">One</a></li>

一个具体的是第一个<li>

中的左开class

   <li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">

Verse the is-down arrow is active

<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">

Answer 1

Aurelia 作为 "Single Page Application" 框架始终动态加载页面内容。我没有测试过，但我认为你必须在加载 ajax 内容后重新涂抹粉底。

您可以在 attached view-model method:

中调用基金会 'reflow'

attached()  {
  $(document).foundation();
}

Answer 2

'reflow' 不是 Foundation 6，我使用

attached(){
  // refresh JS after DOM is loaded
  $(document).foundation();
}

我无法测试这是否能更好地帮助您解决不同的问题 CSS，但我知道这是新的回流。

在此处找到答案：Foundation 6 & Reflow。我测试了回流功能，它有效。

与使用常规方法时的同一页面相比，Aurelia 使用下拉菜单在 Foundation 中发出不同的 css 代码

Aurelia is emitting different css code in Foundation using a dropdown menu when compared to the same page when using the regular method

zurb-foundation

aurelia