Question

系统信息：

Windows 7 x64

aurelia-framework：“^ 1.0.0-beta.1.1.3”

“foundation-sites”：“^ 6.2.1”

骨架的导航的WebPack

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

我正在使用skeleton-navigation-webpack，只需用基础html和css替换导航栏和空欢迎页面

Aurelia Code

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页面中链接。唯一的区别在于html页面中使用了对<li>通过Aurelia

的repeat.for

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>

中的左开课

   <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向下箭头处于活动状态

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

Answer 1

'reflow'不是基础6，而是使用

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

我无法测试这是否可以更好地帮助您使用不同的CSS，但我知道这是新的重排。

在此处找到答案：Foundation 6 & Reflow。我测试了重绕功能，它可以工作。

Answer 2

Aurelia作为“单页面应用程序”框架始终动态加载页面内容。我没有测试它，但我认为你必须在加载ajax内容后重新应用基础。

您可以在attached view-model method：

中调用基础'reflow'

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

使用常规方法时，Aurelia使用下拉菜单在基金会中发出不同的css代码

2 个答案: