What's the right way to enter and exit modal states with Ember router v2?

Question

I can\'t figure out the correct way to handle modal states/views with the new Ember router. More generally, how do you handle states that you can enter and exit without affectin

Answer 1

We do kind of the same thing but without accessing the private API. I don't know if our solution is a best practice, but it works.

In the events of our RootRoute I have an event (same as your newMessage), where we create the view we need to render, and then append it.

events: {
    showNewSomething: function(){
        var newSomethingView = app.NewSomethingView.create({
            controller: this.controllerFor('newSomething')
        });
        newSomethingView.append();
    }
}

This appends the modal view into our app. On cancel or save in the newSomethingView we call this.remove() to destroy the view and removing it from the app again.

Again, this doesn't feel like a best practice, but it works. Feel free to comment on this if someone have a better solution.

Answer 2

Don't know if you are using the Bootstrap Modal script or which one, but if you are, this question has a proposed solution. Haven't figured out all the pieces myself yet, but is looking for a similar type of solution myself to be able to use Colorbox in an "Ember best practices"-compliant way.