There are lot of things you can do with Promise. Today, I will share my experience on using promise for modal which I recently learned.
If you don't know much about EmberJs or Promise. Please visit EmberJS and
Promise) to get your basics up
Why Promise?
https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
Prerequisites
ember install ember-bootstrap
ember generate ember-bootstrap --preprocessor=sass
If you want to use less instead of sass use --preprocesor=less. For other config, please check here
Steps
- Create your component using
ember generate component promise
- promise.js
import Component from '@ember/component';
export default Component.extend({
// It's important to have response undefined instead of boolean
response : undefined,
show : false,
actions: {
promiseClicked() {
new Promise( respond => {
this.set( 'show', true );
this.addObserver( 'response', function observer() {
this.removeObserver( 'response', observer );
respond( this.get( 'response' ) )
});
}).then( proceed => {
if ( proceed ) {
console.log( proceed );
} else {
console.log( proceed );
}
this.setProperties({ 'show': false, 'response': undefined });
});
},
response( bool ) {
this.set( 'response', bool );
}
},
});
Make sure variable response is set to undefined after removing observer.
- promise.hbs
<BsButton @onClick={{action 'promiseClicked'}}> Promise </BsButton>
<BsModal
@open={{show}}
@onSubmit={{action "response" true}}
@onHidden={{action "response" false}} as |modal|>
<modal.header>
<h4 class="modal-title">
Custom Dialog
<div class="badge">2</div>
</h4>
</modal.header>
<modal.body>
Promise Example?
Check console when you click "Cancel or Save".
</modal.body>
<modal.footer>
<BsButton @onClick={{action "response" false}}>Cancel</BsButton>
<BsButton @type="success" @onClick={{action "response" true}}>Save</BsButton>
</modal.footer>
</BsModal>
That's it. Thanks!
Top comments (0)