I am trying to use alertify confirmation box when someone tries to navigate from the page. But in the willTransition action of the route, alertify is very asynchronous, and ember doesn't wait for the confirmation. No matter what you click, the page is already navigated.
willTransition(transition) {
alertify.confirm('Confirm', 'Are you sure you want to navigate?', function(e) {
if(e) {
return true;
} else {
transition.abort();
}
});
}
Please help me with this!!
You can abort and retry transitions. You have to abort the transition before showing the confirmation dialog. After confirming your dialog you can retry the transition and prevent your code from showing your confirmation dialog again. So the following should work (not tested):
export default Ember.Route.extend({
// ...
showConfirmation: true,
actions: {
willTransition(transition) {
if(!this.get('showConfirmation')) {
this.set('showConfirmation', true);
return true;
}
// Abort the transition for now
transition.abort();
// Now show a confirm box with alertify.
// According to the docs, only the following
// is allowed: http://alertifyjs.com/confirm.html
alertify.confirm('Are you sure you want to navigate?', () => {
// According to the documentation of alertify,
// this code is only run when you confirm your box.
this.set('showConfirmation', false);
transition.retry();
});
}
}
}
Related
I'm trying to execute a method when the user leaves the app. I tried everything:
ionViewWillUnload() {
console.log("Wlill unload");
this.leaveRoom();
}
onDestroy() {
console.log("DESTROY");
this.leaveRoom();
}
ionViewWillLeave() {
this.leaveRoom();
}
Unfortunetly they are not executed when user closes the app or when the user refresh the page.
Any idea?
Import Platform:
import { Platform } from 'ionic-angular';
Add Platform to the constuctor:
constructor(public navCtrl: NavController, platform: Platform)
subscribe to the platform pause and resume:
platform.ready().then(() => {
this.platform.pause.subscribe(() => {
console.log('[INFO] App paused');
});
this.platform.resume.subscribe(() => {
console.log('[INFO] App resumed');
});
});
I think what are you looking for can be found here:
http://cordova.apache.org/docs/en/6.x/cordova/events/events.html#endcallbutton
Specifically this event:
function onEndCallKeyDown() {
// Handle the end call button
}
In order to make the event work you have to declare this listener first:
document.addEventListener("endcallbutton", onEndCallKeyDown, false);
onPause Event:
document.addEventListener("pause", onPause, false);
function onPause() {
// Handle the pause event
}
onResume event
document.addEventListener("resume", onResume, false);
function onResume() {
// Handle the resume event
}
Hope it helps!
I want to show a loading spinner in an ember component when I load some data from the store. If there is an error from the store, I want to handle it appropriately.
Here is a snippet of my current code:
cachedCampaignDataIsPending: computed.readOnly('fetchCachedCampaignData.isPending'),
fetchCachedCampaignData: computed('campaign', function() {
return this.get('store').findRecord('cachedCampaignMetric').then( (cachedMetrics) => {
this.set('cachedCampaignData', cachedMetrics);
}, () => {
this.set('errors', true);
});
}),
This will properly set the errors to true if the server responds with an error, however, the cachedCampaignDataIsPending is not acting properly. It does not get set to true.
However, if I rewrite my code to make the computed property not be thenable, then it does fire propertly.
fetchCachedCampaignData: computed('campaign', function() {
return this.get('store').findRecord('cachedCampaignMetric');
}),
Anyone know the reason why, or how to make it fire properly, using the then/catch logic?
Thanks.
Update
I found that this works for me and gives me what I need.
cachedCampaignDataIsPending: computed.readOnly('fetchCachedCampaignData.isPending'),
fetchCachedCampaignData: computed('campaign', function() {
let promise = this.get('store').findRecord('cachedCampaignMetric');
promise.then( (cachedMetrics) => {
this.set('cachedCampaignData', cachedMetrics);
}, () => {
this.set('errors', true);
});
return promise;
}),
I want to abort transition on a particular route and show a modal. This is how my route code looks like:
export default Ember.Route.extend({
model: {/* some code here */},
actions: {
willTransition: function(transition) {
if (!this.controller.get('model.name')) {
console.log('aborting transition');
transition.abort();
this.send('showModal', {
template: 'campaign/campaign-name-modal',
controller: this.controller,
model: this.controller.get('model')
});
}
else {
// Bubble the `willTransition` action so that
// parent routes can decide whether or not to abort.
return true;
}
}
}
});
and then in my application.hbs, I have:
{{outlet 'modal'}}
What I am observing is that transition aborts but my modal doesn't show up. When I switch the ordering to something like:
this.send('showModal', {
template: 'campaign/campaign-name-modal',
controller: this.controller,
model: this.controller.get('model')
});
console.log('aborting transition');
transition.abort();
the transition doesn't abort at all.
I am not exactly sure why this might be happening. Any pointers?
Maybe try editing your conditional to use firstObject:
if (!this.controller.get('model.firstObject.name')) {
I am building a mixin for different routes to handle a save action. Sometimes after saving I want to do extra things, so I want to send a saveCallback action back to the route.
Is it possible to ask to a route if a action is defined? Or else: can I retrieve all functions of a route, so I could check myself if a route is defined?
Code mixin:
export default Ember.Mixin.create({
actions: {
save: {
var self = this;
this.get('model').save()
.then(function(result) {
//do stuff
//Something like if(self.hasDefined('saveCallBack')) {
self.send('saveCallback')
}
}, function(errorReason) {
//error handling
});
}
}
}
I can't just fire the send action, as a Nothing handled the action 'saveCallback' error is thrown if the action is not defined.
I can't find the issue now, but I read an issue on Github at some point about adding a canSendAction (or something similar) function for this reason. For now, just define the same action on your mixin, and have it bubble.
export default Ember.Mixin.create({
actions: {
save: function() {
var self = this;
this.get('model').save().then(function() {
self.send('saveCallback');
});
},
saveCallback: function() {
return true;
}
}
});
EDIT: I'm being dumb. Just return true and the action should bubble up the hierarchy and will be caught by another action if it exists.
As I currently have it set up, my validations are not being shown on the submit on an ember easyForm form. the current setup for the mixin only allows for validations to be shown on focusOut of an input. Does anybody have a workaround for this?
easyForm is calling validate in the context.
Ember.EasyForm.Form = Ember.EasyForm.BaseView.extend({
// rest of the code removed for brevity
submit: function(event) {
var _this = this, promise;
if (event) {
event.preventDefault();
}
if (Ember.isNone(this.get('context.validate'))) {
this.get('controller').send(this.action);
} else {
if (!Ember.isNone(this.get('context').validate)) {
promise = this.get('context').validate();
} else {
promise = this.get('context.content').validate();
}
promise.then(function() {
if (_this.get('context.isValid')) {
_this.get('controller').send(_this.action);
}
});
}
}
});
Could you verify it's calling your model's validate method? If that's not the case could you raise a bug on easyForm if this isn't the case?
It seems to be that isn't calling validate in the content since it will call the controller if context.validate isNone