如何在Emberjs中使用Bootstrap JavaScript插件（下拉列表，模式）

湿jo

我无法在下拉菜单中使用Bootstrap 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已安装并正常运行，对吗？但是，尽管Boostrap按钮的样式应类似于Bootstrap按钮，但它不起作用。当我单击它时，没有模式出现。与下拉菜单相同。

人v2.7.1
jQuery v2.2.4
引导程序v3.3.5

回答

@ykaragol完美回答了我的问题（下面接受的答案）。但是，我现在知道您不必在Ember中使用ember-bootstrap附加程序来使用bootstrap（尽管它看起来确实具有一些精美组件的附加优点）。一种替代方法是通过bower install bootstrap --save-dev将Bower安装香草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' });

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

ykaragol

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文件列表。（例如弹出框，工具提示）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。