2

I can't get Bootstrap JavaScript plugins like dropdowns and modals to work out of the box in Ember. From the command line:

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 (copied from 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);
  }
});

The log prints out 4, so jQuery is installed and working, right? But while the Boostrap button is styled like a Bootstrap button should be, it doesn't function. No modal appears when I click it. Same with a dropdown menu.

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

Answer

@ykaragol answered my question perfectly (the accepted answer below). However I now understand that you do not have to use the ember-bootstrap add on to use bootstrap in Ember (though it does look like it has the added benefit of some nifty components). An alternative is to install vanilla Bootstrap with Bower via bower install bootstrap --save-dev and placing the following in 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' });

make sure to restart ember server via ctl-C and then ember s

wetjosh
  • 6,288
  • 4
  • 23
  • 32
  • You need to include their components for button `{{bs-button}}` .... http://kaliber5.github.io/ember-bootstrap/components/ – Ember Freak Aug 24 '16 at 07:45
  • if you want to use bootstrap alone then you need to install via `bower install --save bootstrap` and in ember-cli-build.js include `app.import('bower_components/bootstrap/dist/js/bootstrap.js')` `app.import('bower_components/bootstrap/dist/css/bootstrap.css');` http://stackoverflow.com/a/23634931/5771666 – Ember Freak Aug 24 '16 at 07:50

1 Answers1

0

ember-bootstrap is good enough. But importing the js files are not documented well.

You need to add specific javascript file from the addon. Add the following line to ember-cli-build.js:

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

File content should be something like this:

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

    ...

    return app.toTree();
}

You can find the list of javascript files under bower_components/bootstrap/js/ directory. (Such as popover, tooltip)

ykaragol
  • 6,139
  • 3
  • 29
  • 56