3.0.0 • Published 8 years ago
ember-bootstrap-modal v3.0.0
Ember-bootstrap-modal
Installation
npm install --save-dev ember-bootstrap-modal
ember g ember-bootstrap-modal
###Example implementation
####templates/application.hbs
It's recommended to use ember-wormhole in conjunction in order for the bootstrap modal HTML markup not to interfere with your layout.
<div class="container">
{{outlet}}
<div id="destination">
<!-- ember-wormhole -->
</div>
</div>
####templates/test.hbs
<div class="row">
<div class="col-md-12">
<button type="submit" type="button" class="btn btn-large btn-primary" {{action "toggleShow"}}>Show</button>
{{#ember-wormhole to="destination"}}
{{test-modal isVisible=showMyModal}}
{{/ember-wormhole}}
</div>
</div>
####controllers/test.js
import Ember from 'ember';
export default Ember.Controller.extend({
showMyModal: false,
actions: {
toggleShow() {
this.set('showMyModal', !this.get('showMyModal'));
}
}
});
####templates/components/test-modal.hbs
{{#bootstrap-modal isVisible=isVisible title="Your Custom Bootstrap Modal"}}
{{input type="text" class="form-control"}}
{{/bootstrap-modal}}
####components/test-modal.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
doSave(d, meta) {
//d.reject();
d.resolve();
},
doAfterClose() {
//
},
doClose(d) {
if(confirm('Please confirm...')) {
d.resolve();
} else {
d.reject();
}
}
}
});
####router.js
this.route('test');