CODEWITHSUNDEEP
javascriptember.js
D.Breen
D.Breen

Reputation: 51

In Ember 1.x, how do I use a modal in willTransition()

I'm trying to open a modal dialog when someone tries to navigate away from a page with a form that isn't complete. I have the modal template built, but I can't figure out how to implement it. Here's what I have:

actions: {
    willTransition: function( transition ){
        var model = this.currentModel;

        if( model.get( 'isDirty' ) ){
            this.render( 'my-modal', {
                into: 'application',
                outlet: 'modal'
        } );
            if(!this.get(abortConfirmed) {
                transition.abort();
            } else {
               model.rollback();
            }
        }
    }
}

NOTE: The dirty checking works and I can generate a prompt, but this modal thing is not working

Upvotes: 0

Views: 146

Answers (2)

mistahenry
mistahenry

Reputation: 8734

So here's the workflow I use.

1). in the willTransition(transition) hook, do the check to see if you should show the modal.

2). If you should show the modal (in your case, when the model isDirty), call transition.abort(). You must do this to prevent the transition from happening. You also though need a second property on your controller that determines whether or not the transition has been authorized. So really, you check model.get('isDirty) && this.controller.get('transitionAuthorized')

3). You need a way to pass state to your modal or for your modal to be able to communicate back with the page that has created the modal. I personally pass a continueFn and a cancelFn to my modals that close over the current context. Something like

var continueFn = this.createUnsavedDialogContinueFn(this, transition);

where that function is:

createUnsavedDialogContinueFn: function(context, transition){
        return function(){
            context.controller.set('transitionAuthorized', true);
            transition.retry();
        }
}

I pass this continueFn to the modal, whose I don't care if I have Pending changes button calls via an action. You can, though, delegate this work back to the controller/route if that feels easier for you. What's important is that you set the transitionAuthorized to true and call transition.retry()

4). calling transition.retry will pass back thru the willTransition but this time you have set transitionAuthorized to true and everything passes through.

Upvotes: 1

Scott Nedderman
Scott Nedderman

Reputation: 567

You need to stop the transition from occurring. Add transition.abort() at the bottom of your 'isDirty' check.

Upvotes: 0

Related Questions