I'm using Ember-CLI 0.2.7, I use 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 inactivityWarning view:
import Ember from '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">×</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 the button, error: Uncaught TypeError: $(...).modal is not a function
I checked the console, and inspect the object printed by console.log($("#myModal"));, I couldn't find the 'modal' function there:
I compared it with the example code (non-ember, plain html+js) I copied from http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php , and I can see 'modal' in the list of fuctions it owns by the selected element.
I don't understand, why the difference? I checked the .bower.json under bower_components/boostrap/ in my ember project, I could see it is version 3.3.4, just like the one used by the example in tutorialrepublic.
Is ember-bootstrap using a 'modified' version of bootstrap 3.3.4 (taking out some functions that maybe is not supported yet, such as dot modal) ?
What if I just forget ember-bootstrap, and use bootstrap directly in my ember (I don't need the emberish bootstrap component for now). How to do that?
UPDATE
In order to use "vanilla boostrap" (without embery component), I switched to https://github.com/lifegadget/ember-cli-bootstrap-sassy
Now I can see the .modal function in the list.
However, now I'm having a different problem.... the which is supposed to be hidden initially... is shown from the beginning. As if it cannot find the definition for the class 'modal'... I suspect ember-cli-bootstrap-sassy install guide is not complete. Anybody knows how to get it right?
Thanks, Raka