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">&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 '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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

python 3.5 - Pyqtgraph string in x tick -