Ember.js Transition then() Method

0 0 2 minutes read

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!