答案

Question

我无法在Ember中获得开箱即用的Bootstrap JavaScript插件，如下拉列表和模态。从命令行：

ember new test-app
ember install ember-bootstrap

ember generate route test
ember generate component jquery-test

应用程序/模板/ 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>

应用/组件/ jquery的-test.js：

import Ember from 'ember';

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

日志打印出4，所以jQuery已安装并正常工作，对吧？但是，虽然Boostrap按钮的样式应该像Bootstrap按钮，但它不起作用。点击它时没有出现模态。与下拉菜单相同。

Ember v2.7.1
jQuery v2.2.4
Bootstrap v3.3.5

答案

@ykaragol完美回答了我的问题（下面接受的答案）。但是我现在明白你不必使用ember-bootstrap添加来在Ember中使用bootstrap（虽然它看起来确实有一些漂亮组件的额外好处）。另一种方法是通过bower install bootstrap --save-dev安装带有Bower的vanilla Bootstrap并将以下内容放在ember-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

重启ember服务器

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文件列表。（如popover，tooltip）

如何在Emberjs

答案

1 个答案: