jquery - Dot "modal" function is not available for the element selected / Ember / Bootstrap -

i'm using ember-cli 0.2.7, use ember-bootstrap in project: https://www.npmjs.com/package/ember-bootstrap

my application.hbs:

<h2 id="title">welcome ember.js</h2> {{view "inactivitywarning"}} {{outlet}} 

i have route named: login. login.hbs:

<h2>login</h2> <button class="btn btn-lg btn-primary" {{action "showmodal"}}>   <span class="glyphicon glyphicon-cog"></span> log me in! </button> 

my login controller:

import ember 'ember'; export default ember.controller.extend({   actions: {     showmodal: function() {       console.log($("#mymodal"));       console.log($("#mymodal").element);       $("#mymodal").modal('show');     }   } }); 

my inactivitywarning view:

import ember 'ember'; export default ember.view.extend({   templatename: 'views/inactivity-warning' }); 

my inactivitywarning template:

<div id="mymodal" class="modal fade"> <div class="modal-dialog">     <div class="modal-content">         <div class="modal-header">             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>             <h4 class="modal-title">confirmation</h4>         </div>         <div class="modal-body">             <p>do want save changes made document before closing?</p>             <p class="text-warning"><small>if don't save, changes lost.</small></p>         </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> 

i clicked button, error: uncaught typeerror: $(...).modal not function

i checked console, , inspect object printed console.log($("#mymodal"));, couldn't find 'modal' function there:

i compared example code (non-ember, plain html+js) copied http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php , , can see 'modal' in list of fuctions owns selected element.

i don't understand, why difference? checked .bower.json under bower_components/boostrap/ in ember project, see version 3.3.4, 1 used example in tutorialrepublic.

is ember-bootstrap using 'modified' version of bootstrap 3.3.4 (taking out functions maybe not supported yet, such dot modal) ?

what if forget ember-bootstrap, , use bootstrap directly in ember (i don't need emberish bootstrap component now). how that?

---

update

in order use "vanilla boostrap" (without embery component), switched https://github.com/lifegadget/ember-cli-bootstrap-sassy

now can see .modal function in list.

however, i'm having different problem.... supposed hidden initially... shown beginning. if cannot find definition class 'modal'... suspect ember-cli-bootstrap-sassy install guide not complete. knows how right?

thanks, raka

ok,

i followed basic suggestion ember-cli guide here: http://www.ember-cli.com/asset-compilation/ :

bower install bootstrap --save 

in brocfile.js add following:

app.import('bower_components/bootstrap/dist/css/bootstrap.css'); 

the guide forgot mention it's important put in brocfile.js:

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

with that, have (boostrap) modal dialog in ember app.