如何在Emberjs中使用引导JavaScript插件(下拉列表、调制解调器)

Question

我不能让引导JavaScript插件，如下拉和调制解调器，以工作的盒子在Ember。从命令行：

ember new test-app
ember install ember-bootstrap

ember generate route test
ember generate component jquery-test

app/templates/test.hbs：

{{jquery-test}}

app/templates/components/jquery-test.hbs (从getbootstrap.com复制)：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

app/components/jquery-test.js：

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function() {
    console.log($("button").length);
  }
});

日志打印出4，所以jQuery已经安装和工作，对吗？但是，虽然引导按钮的样式应该是一个引导按钮，但它不起作用。当我点击它时没有出现模态。下拉菜单也是如此。

• Ember v2.7.1
• jQuery v2.2.4
• 引导v3.3.5

回答

@ykaragol完美地回答了我的问题(下面是被接受的答案)。不过，我现在明白了，您不必使用Ember引导添加来使用Ember中的引导(虽然它看起来确实有一些漂亮组件的额外好处)。另一种选择是通过bower install bootstrap --save-dev安装带有Bower的香草引导带，并将以下内容放入成员-cli-build.js中

  app.import('bower_components/bootstrap/dist/css/bootstrap.min.css');
  app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', { destDir: 'fonts' });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', { destDir: 'fonts' });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', { destDir: 'fonts' });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', { destDir: 'fonts' });

确保通过ctl-C重新启动成员服务器，然后通过ember s重新启动

Answer 1

ember-bootstrap已经足够好了。但是导入js文件并没有得到很好的记录。

您需要从附件中添加特定的javascript文件。将以下行添加到ember-cli-build.js

app.import('bower_components/bootstrap/js/modal.js');

文件内容应该如下所示：

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
    // Add options here
    });
    app.import('bower_components/bootstrap/js/modal.js');

    ...

    return app.toTree();
}

您可以在bower_components/bootstrap/js/目录下找到javascript文件的列表。(如弹出器、工具提示)