带有bootstrap下拉菜单的ember cli app会在鼠标释放时立即关闭_JavaScript

我最近才开始使用ember，我想要包含bootstrap。 我通过bower添加了bootstrap： bower install --save bootstrap然后将以下内容添加到我的ember-cli-build.js文件中：

app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');

所有这些似乎都有效，但是当我添加一个下拉菜单时，单击菜单会按预期展开，但随后鼠标释放会立即关闭 - 即单击一下似乎没有任何反应，但如果单击并按住菜单，则会出现一释放按钮就会消失。 如果我使用Tab键选项卡到菜单，然后点击向下箭头，也会出现下拉菜单。 我怀疑它与jquery有关，因为调试器跳转到jquery.js并且在那里菜单关闭，但我不够精通弄清楚发生了什么......

这是我的bower.json文件：

{
  "name": "ember-mm-phone-app",
  "dependencies": {
    "ember": "1.13.3",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-data": "1.13.5",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
    "ember-qunit": "0.4.1",
    "ember-qunit-notifications": "0.0.7",
    "ember-resolver": "~0.1.18",
    "jquery": "^1.11.1",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "qunit": "~1.17.1",
    "ember-simple-auth": "0.8.0",
    "bootstrap": "~3.3.5"
  },
  "devDependencies": {
    "ember-localstorage-adapter": "0.5.4"
  }
}

这是下拉菜单：

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Account <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li>{{link-to 'Profile' 'user'}}</li>
            <li>{{link-to 'Settings' 'application'}}</li>
            <li>{{link-to 'Terms and Conditions' 'application'}}</li>
            <li class="divider"></li>
            <li>
              <a {{ action 'invalidateSession' }}>Logout</a>
            </li>
          </ul>
        </li>

如果您阅读了，它会说Javascript会将open类添加到元素中。 问题是Ember希望管理DOM本身，它不希望任何第三方库这样做。 因此，当Bootstrap向DOM添加一个类时，它可能会在下次Ember更新DOM时被覆盖。

根据您的使用情况，有一些可能的解决方案。 您可以将下拉列表包装在组件中，但这可能有点过分。 最简单的方法是使用Ember的click事件而不是调用$(element).dropdown() 。

<li class="dropdown {{if dropdownOpen 'open'}}">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" {{action 'toggleDropdown'}}>
    Account <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li>{{link-to 'Profile' 'user'}}</li>
    <li>{{link-to 'Settings' 'application'}}</li>
    <li>{{link-to 'Terms and Conditions' 'application'}}</li>
    <li class="divider"></li>
    <li>
      <a {{ action 'invalidateSession' }}>Logout</a>
    </li>
  </ul>
</li>

注意在条件类li ，并在行动a 。 现在，在您的控制器中，执行以下操作：

dropdownOpen: false,

actions: {
    toggleDropdown() {
        this.toggleProperty('dropdownOpen');
    }
}

这将为您添加和删除open类，从而避免使用Bootstrap Javascript插件。 如果这不能涵盖您的所有基础，您可能需要考虑将下拉包装在。 虽然包装在一个组件中需要更多的工作。 还有一些Ember Bootstrap项目，但我不知道他们的工作有多好。

短篇小说：它不适合你，因为Ember正在覆盖Bootstrap正在制作的DOM的变化。 你需要一种方法来整合这两者。

由于我今天早上完成的其他凉亭安装，一定会发生其他事情，因为我的机器在发布此问题后大约一个小时后逐渐停止。 我不得不重新启动，然后下拉菜单神奇地开始工作！ 当你在一个问题上花费几个小时并且通过重启解决它时非常令人沮丧。

带有bootstrap下拉菜单的ember cli app会在鼠标释放时立即关闭

问题描述

1楼

2楼