Ember.js Transition then() Method

Ember.js is a popular JavaScript framework for building web applications. One useful feature of Ember is the Transition object, which represents a transition between two routes in an Ember application. The Transition object has a number of methods that can be used to perform different actions during a transition, including the then() method.

The then() method allows you to specify a function that should be executed once the transition has been completed. This can be useful for performing tasks such as updating the UI or performing cleanup after the transition.

Syntax:

transitionTo('routeName').then(function(){ 
    // your code here
});

Parameters:

• routeName: a route name on which the page will transition to.
• function: a function that will be executed on route transition. 

Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:

npm install ember-cli

Step 2: Now you can create the project by typing in the following piece of code:

ember new <project-name> --lang en

To start the server, type:

ember serve

Example 1: Type the following code to generate the route for this example:

ember generate route home
ember generate route second

app/routes/home.js

Javascript

import Route from '@ember/routing/route';

export default class HomeRoute extends Route {
    actions = {
        transitionToSecondRoute() {
            this.transitionTo('second').then(() => {
                console.log('Transition to second route complete');
            });
        }
    }
}

app/templates/home.hbs

Javascript

<button {{action 'transitionToSecondRoute'}}>
    Transition to Second Route
</button>

Output:

Example 2: Type the following code to generate the route for this example:

ember generate route home
ember generate route second

app/routes/home.js

Javascript

import Route from '@ember/routing/route';

export default class HomeRoute extends Route {
    actions = {
        transitionToSecondRoute() {
            this.transitionTo('invalid-route').then(() => {
                console.log('Transition to invalid route complete');
            }).catch((error) => {
                console.error(error);
            });
        }
    }
}

app/templates/home.hbs 

HTML

<button {{action 'transitionToSecondRoute'}}>
      Transition to Second Route
</button>

Output:

Reference: https://emberjs.com/api/ember/3.23/classes/Transition