Function "modal" not available for selected element / Ember / Bootstrap

I am using Ember-CLI 0.2.7, I am using ember-bootstrap in my project: https://www.npmjs.com/package/ember-bootstrap

My application.hbs:

<h2 id="title">Welcome to Ember.js</h2>
{{view "inactivityWarning"}}
{{outlet}}

      

        
        
        
      

    

I have a route named: login. My 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 from 'ember';
export default Ember.Controller.extend({
  actions: {
    showModal: function() {
      console.log($("#myModal"));
      console.log($("#myModal").element);
      $("#myModal").modal('show');
    }
  }
});

      

        
        
        
      

    

My inactivity. Warning:

import Ember from 'ember';
export default Ember.View.extend({
  templateName: 'views/inactivity-warning'
});

      

        
        
        
      

    

My idle pattern:

<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 you want to save changes you made to document before closing?</p>
            <p class="text-warning"><small>If you don't save, your changes will be 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 a button, error: Uncaught TypeError: $ (...). modal is not a function

I checked the console and looked at the object printed by console.log ($ ("# myModal"));, I couldn't find the 'modal' function there:

I compared it to the sample code (non-ember, plain html + js) I copied from http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php and can see "modal" in the list of fuctions belonging to the selected item.

I don't understand why the difference? I checked the .bower.json under bower_components / boostrap / in my ember project, I could see that it is version 3.3.4, just like the one used in the example in tutorialrepublic.

Is ember-bootstrap using a "modified" version of bootstrap 3.3.4 (extracting some functionality that might not yet be supported, like mod-mod)?

What if I just forget ember-bootstrap and use bootstrap right in my ember (I don't need the emberish bootstrap component at the moment). How to do it?

UPDATE

To use the "vanilla booster" (without the embery component) I switched to https://github.com/lifegadget/ember-cli-bootstrap-sassy

I can now see the .modal function in the list.

However, now I have a different problem ... what should have been hidden initially ... shown from the beginning. As if it can't find a definition for the "modal" class ... I suspect the ember-cli-bootstrap-sassy installation guide is not complete. Does anyone know how to do this correctly?

Thanks, Raka