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

Question

我最近才开始使用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>

Answer 1

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

根据您的使用情况,有一些可能的解决方案.您可以将下拉列表包装在组件中,但这可能有点过分.最简单的方法是使用Ember的点击事件而不是调用$(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的变化.你需要一种方法来整合这两者.