Removing / destroying creates a blank screen?

[johnnietheblack]

In my controller, I am calling a method called 'backToBlogList' when a back button is clicked inside of a blog view. The method I'm using is below (:


backToBlogList: function(currentBlog) { console.log('remove');
this.getAppViewport().animateActiveItem(this.getBlogList(),{ type: 'cover', direction: 'down'});
this.getAppViewport().remove(currentBlog,true);
},

When I click the back button, it calls this method (I can see the console.log('remove') appear), but the screen immediatly goes blank...as if it removed EVERYTHING.

What I've tried:

1. If I comment out the first this.getAppViewport() line, the blogList shows up, but it is animated incorrectly. Like so:


backToBlogList: function(currentBlog) { console.log('remove');
//this.getAppViewport().animateActiveItem(this.getBlogList(),{ type: 'cover', direction: 'down'});
this.getAppViewport().remove(currentBlog,true);
},



2. If I comment out the second this.getAppViewport() line, the blogList shows up with the correct animation, but I'm not sure if the currentBlog ever got removed? Like so:


backToBlogList: function(currentBlog) { console.log('remove');
this.getAppViewport().animateActiveItem(this.getBlogList(),{ type: 'cover', direction: 'down'});
//this.getAppViewport().remove(currentBlog,true);
},

So, basically whatever is breaking is breaking because BOTH lines are there.

Any thoughts / help?

[mitchellsimoens]

You should wait for the animation to finish before removing the component.

[johnnietheblack]

Okay, and I'm totally familiar with that process, but I'm not seeing a callback method or something that I can use to detect that the animation is finished....

Is there a method or example of how you can do that that you could possibly show me?

Thanks!

[mitchellsimoens]

You should be able to use the activeitemchange event.