Last active
August 29, 2015 13:57
-
-
Save taras/9392307 to your computer and use it in GitHub Desktop.
This shows how to use promiseAction to handle result of a dialog.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}) | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
}); | |
} | |
} | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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