jquery - How to use Bootstrap JavaScript plugins (dropdowns, modals) in Emberjs -
i can't bootstrap javascript plugins dropdowns , modals work out of box in ember. 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 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">×</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 'ember'; export default ember.component.extend({ didinsertelement: function() { console.log($("button").length); } });
the log prints out 4, jquery installed , working, right? while boostrap button styled bootstrap button should be, doesn't function. no modal appears when click it. same dropdown menu.
- ember v2.7.1
- jquery v2.2.4
- bootstrap v3.3.5
answer
@ykaragol answered question (the accepted answer below). understand not have use ember-bootstrap add on use bootstrap in ember (though has added benefit of nifty components). alternative install vanilla bootstrap bower via bower install bootstrap --save-dev
, placing 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 restart ember server via ctl-c
, ember s
ember-bootstrap
enough. importing js files not documented well.
you need add specific javascript file addon. add following line ember-cli-build.js
:
app.import('bower_components/bootstrap/js/modal.js');
file content should 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 list of javascript files under bower_components/bootstrap/js/
directory. (such popover, tooltip)
Comments
Post a Comment