Skip to content

Instantly share code, notes, and snippets.

@taras
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taras/9392307 to your computer and use it in GitHub Desktop.
Save taras/9392307 to your computer and use it in GitHub Desktop.
This shows how to use promiseAction to handle result of a dialog.
{{render 'topbar'}}
{{cookie-alerts}}
{{outlet}}
{{modal-confirm
action=modalConfirm
isVisible=isVisibleModalConfirm
text=modalConfirmText
trueText=modalConfirmTrueText
falseText=modalConfirmFalseText}}
import promiseActionComputedProperty from 'next/utils/computed/promise-action';
var set = Ember.set;
export default Ember.Controller.extend({
needs: ['topbar'],
actions: {
changeKeyword: function(keyword) {
set(this, 'topbar.keyword', keyword);
}
},
showModalConfirm: function(resolve, reject, options) {
this.setProperties({
modalConfirmResolve: resolve,
modalConfirmReject: reject,
modalConfirmText: options.text || 'Not specified',
modalConfirmTrueText: options.trueText || 'Yes',
modalConfirmFalseText: options.falseText || 'No',
isVisibleModalConfirm: true
});
},
hideModalConfirm: function() {
this.setProperties({
modalConfirmResolve: null,
modalConfirmReject: null,
isVisibleModalConfirm: false
});
},
// modalConfirm promiseAction is passed as action to component's action
modalConfirm: promiseActionComputedProperty(function(selection) {
var resolve = this.get('modalConfirmResolve');
if (resolve) { // resolve the promise that triggered this modal
this.hideModalConfirm();
resolve(selection);
}
})
});
var set = Ember.set, get = Ember.get;
export default Ember.Route.extend({
actions: {
search: function(keyword) {
this.search(keyword);
},
showSearchField: function() {
if (get(this, 'controller.controllers.topbar')) {
set(this, 'controller.controllers.topbar.isSearchFieldVisible', true);
}
},
hideSearchField: function() {
if (get(this, 'controller.controllers.topbar')) {
set(this, 'controller.controllers.topbar.isSearchFieldVisible', false);
}
},
modalConfirm: function(resolve, reject, options) {
// pass action parameters to showModalConfirm on the controller
this.controllerFor('application').showModalConfirm(resolve, reject, options);
}
},
search: function(keyword) {
return this.transitionTo('search', keyword, {queryParams: {source_ids:false, frequency:false, page: 1}});
}
});
var set = Ember.set, get = Ember.get;
export default Ember.Route.extend({
actions: {
willTransition: function(transition) {
var _this = this, controller = this.controllerFor('dataset.edit');
if (get(controller, 'hasBufferedChanges')) {
transition.abort();
var selectionPromise = new Ember.RSVP.Promise(function(resolve, reject){
_this.send('modalConfirm', resolve, reject, {
text: "Existing without saving will lose your changes. Do you wish to proceed?"
});
});
selectionPromise.then(function(affirmative){
if (affirmative) {
// discard the changes
controller.discardBufferedChanges();
transition.retry();
}
});
}
}
},
<div class="box">
<p>{{text}}</p>
<button class="button alert" {{action 'action' true}}>{{trueText}}</button>
<button class="button false" {{action 'action' false}}>{{falseText}}</button>
</div>
// A PromiseAction is an action set on the controller,
// but not in the actions hash, which allows it to be
// passed in directly to the component. The component
// just sees it as a function that it can call that
// returns a promise. This is nice for when the component
// needs to emit some action that can fail; if it fails
// it can clean up after itself.
// Example:
// export default Controller.extend({
// setSomeValueAsyncly: promiseAction(function(newValue) {
// this.set('something', newValue);
// // simulate a slow set...
// return new Ember.RSVP.Promise(function(resolve) {
// Ember.run.later(resolve, 1000);
// });
// })
// });
//
// {{some-component on-change=setSomeValueAsyncly}}
export default function promiseActionComputedProperty(fn) {
return Ember.computed(function() {
var self = this;
return function() {
var args = arguments;
return new Ember.RSVP.Promise(function(resolve) {
resolve(fn.apply(self, args));
});
};
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment